<template>
  <div class="annotation-container">
    <div style="display: flex">
      <div class="svg-container">
        <svg
          ref="svgCanvas"
          width="800"
          height="600"
          @mousedown="onMouseDown"
          @mouseup="onMouseUp"
          @mousemove="onMouseMove"
          @wheel="handleWheel"
          style="background-color: white"
        >
          <!-- <image x="0" y="0" width="800" height="600" href="@/assets/vue.png" />
          <image x="0" y="0" width="800" height="600" href="@/assets/row.png" /> -->
          <image x="0" y="0" width="800" height="600" href="@/assets/column.png" />
        </svg>
      </div>
      <div class="rect-data-display">
        <h3>矩形数据列表</h3>
        <pre>{{ JSON.stringify(rectList, null, 2) }}</pre>
        <div v-for="(item,index) in rectList" :key="item.id">
          <el-input v-model="rectList[index].x" />
          <el-input v-model="rectList[index].y" />
          <el-input v-model="rectList[index].width" />
          <el-input v-model="rectList[index].height" />
        </div>
      </div>
    </div>
    <div>
      <div class="controls">
        <div v-if="historyOperationList?.length">
          <button @click="undoLastAction">撤销</button>
          <button @click="cancelUndo">取消撤销</button>
        </div>

        <button @click="selectShape('rect')">矩形</button>
        <button @click="clearSelection" :disabled="!selectedElement">清除选择</button>
        <button @click="cleanupAllResizeHandles">清理控制点</button>
        <button @click="debugResizeHandles">调试信息</button>

        <button @click="forceRestoreDragState">强制恢复拖拽</button>
        <!-- <button @click="checkHoverDragConsistency">检查一致性</button> -->
        <button @click="exitDrawingMode" :disabled="!drawingMode">退出绘制</button>
        <button @click="resetViewport">重置视口</button>
        <button @click="testPanning">测试拖动</button>
        <button @click="testClickDrawing" style="background-color: #28a745; color: white">
          测试点击绘制
        </button>
        <button
          @click="checkViewportDrawingState"
          style="background-color: #17a2b8; color: white"
        >
          检查视口绘制状态
        </button>
        <button
          @click="testViewportCoordinates"
          style="background-color: #6f42c1; color: white"
        >
          测试视口坐标
        </button>
        <button
          @click="testDrawingPosition"
          style="background-color: #fd7e14; color: white"
        >
          测试绘制位置
        </button>
        <button
          @click="() => console.log('基本点击测试')"
          style="background-color: #dc3545; color: white"
        >
          基本点击测试
        </button>
      </div>
      <div class="shortcuts-info">
        <p>
          🎨 快捷键：按 <kbd>N</kbd> 进入矩形绘制模式，<kbd>ESC</kbd> 退出绘制，<kbd
            >空格</kbd
          >
          测试拖动
        </p>
        <p>🔍 操作：滚轮缩放，中键/右键拖动画布</p>
        <p>🎯 智能拖拽：移入元素时自动设置拖拽优先级，确保移入和拖拽的一致性</p>
        <p>
          📊 当前缩放：{{ Math.round(viewport.scale * 100) }}% | 位置：X:{{
            Math.round(viewport.translateX)
          }}, Y:{{ Math.round(viewport.translateY) }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, computed, defineProps,defineEmits } from "vue";
import polylabel from "polylabel";
import SVG, { get } from "svg.js";
import svgDraw from "svg.draw.js";
// import * as svgResize from 'svg.resize.js';  // Modified import
import "svg.draggable.js";
import "svg.resize.js";
import "svg.select.js";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(['update:data'])


// ==================== 响应式数据 ====================
const currentShape = ref("rect"); // 当前选择的绘制形状类型
const drawingMode = ref(false); // 是否处于绘制模式
const drawing = ref(false); // 是否正在绘制状态
const dragging = ref(false); // 是否正在拖拽状态
const svgDoc = ref(null); // SVG.js 文档对象
const currentElement = ref(null); // 当前正在绘制的元素
const svgCanvas = ref(null); // SVG DOM 引用
const startPoint = ref(null); // 绘制起始点坐标
const selectedElement = ref(null); // 当前选中的元素
const hoveredElement = ref(null); // 当前悬停的元素
const allElements = ref([]); // 所有已绘制的元素数组
const lastMousePos = ref({ x: 0, y: 0 }); // 上次鼠标位置（用于优化悬停检测）

// 添加矩形数据列表响应式数组
// const rectList = ref([]);
// 历史操作记录
const historyOperationList = ref([]);

const undoLastAction = () => {};
const cancelUndo = () => {};

// 性能优化：全局调试开关
window.debugMode = false; // 设置为 true 可以启用详细日志

// 缩放和拖动相关状态
const viewport = ref({
  scale: 1,
  translateX: 0,
  translateY: 0,
  isPanning: false,
  lastPanPoint: { x: 0, y: 0 },
  minScale: 0.1,
  maxScale: 10,
});

// ==================== 工具函数 ====================

/**
 * 获取鼠标在SVG中的准确坐标
 * @param {MouseEvent} event - 鼠标事件对象
 * @returns {{x: number, y: number}} SVG坐标系中的坐标
 */
const getMousePosition = (event) => {
  // 添加安全检查
  if (!svgCanvas.value) {
    console.error("❌ svgCanvas 未初始化");
    return { x: 0, y: 0 };
  }

  try {
    const rect = svgCanvas.value.getBoundingClientRect();

    // 验证 rect 的有效性
    if (!rect || typeof rect.left !== "number" || typeof rect.top !== "number") {
      console.error("❌ 无效的 getBoundingClientRect 结果:", rect);
      return { x: 0, y: 0 };
    }

    // SVG.js 拖拽事件可能使用不同的事件对象格式
    let clientX, clientY;

    if (event.clientX !== undefined && event.clientY !== undefined) {
      // 标准 DOM 事件
      clientX = event.clientX;
      clientY = event.clientY;
    } else if (event.detail && event.detail.event) {
      // SVG.js 拖拽事件
      clientX = event.detail.event.clientX;
      clientY = event.detail.event.clientY;
    } else if (event.originalEvent) {
      // jQuery 事件
      clientX = event.originalEvent.clientX;
      clientY = event.originalEvent.clientY;
    } else {
      // 尝试其他可能的属性
      console.warn("⚠️ 无法获取鼠标坐标，尝试其他属性:", event);

      // 检查事件对象的所有属性
      for (let key in event) {
        if (key.includes("client") || key.includes("page") || key.includes("screen")) {
          console.log(`🔍 事件属性 ${key}:`, event[key]);
        }
      }

      // 如果都找不到，使用事件对象的其他坐标
      if (event.pageX !== undefined && event.pageY !== undefined) {
        clientX = event.pageX - window.pageXOffset;
        clientY = event.pageY - window.pageYOffset;
      } else {
        console.error("❌ 无法获取鼠标坐标");
        return { x: 0, y: 0 };
      }
    }

    // 计算相对于SVG容器的坐标
    let x = clientX - rect.left;
    let y = clientY - rect.top;

    // 重要：应用视口变换的逆变换，获取SVG坐标系中的真实坐标
    // 这是修复缩放后绘制失效的关键

    // 视口变换是应用在SVG元素上的：transform = translate(tx, ty) scale(s)
    // 这意味着SVG坐标系被变换了，我们需要找到逆变换

    // 正确的逆变换：
    x = x / viewport.value.scale;
    y = y / viewport.value.scale;
    // console.log('变换后的x---', x);
    // console.log('变换后的y---', y);

    // 验证计算结果
    if (isNaN(x) || isNaN(y)) {
      console.error("❌ 鼠标位置计算结果无效:", {
        clientX,
        clientY,
        rectLeft: rect.left,
        rectTop: rect.top,
        translateX: viewport.value.translateX,
        translateY: viewport.value.translateY,
        scale: viewport.value.scale,
        calculatedX: x,
        calculatedY: y,
      });
      return { x: 0, y: 0 };
    }

    // 调试信息：只在调试模式下显示
    if (window.debugMode) {
      console.log("📍 鼠标位置计算:", {
        clientX,
        clientY,
        rectLeft: rect.left,
        rectTop: rect.top,
        translateX: viewport.value.translateX,
        translateY: viewport.value.translateY,
        scale: viewport.value.scale,
        calculatedX: Math.round(x * 100) / 100,
        calculatedY: Math.round(y * 100) / 100,
        eventType: event.type,
      });
    }

    return { x, y };
  } catch (error) {
    console.error("❌ 获取鼠标位置时出错:", error);
    return { x: 0, y: 0 };
  }
};

/**
 * 获取元素的默认描边颜色
 * @param {Object} element - SVG元素对象
 * @returns {string} 颜色值
 */
const getDefaultStroke = (element) => {
  const type = element.type;
  if (type === "rect") return "blue";
  if (type === "ellipse") return "green";
  if (type === "polygon") return "red";
  return "black";
};

/**
 * 获取元素的默认填充颜色
 * @param {Object} element - SVG元素对象
 * @returns {string} 颜色值
 */
const getDefaultFill = (element) => {
  const type = element.type;
  if (type === "rect") return "rgba(0, 0, 255, 0.1)";
  if (type === "ellipse") return "rgba(0, 128, 0, 0.1)";
  if (type === "polygon") return "rgba(255, 0, 0, 0.1)";
  return "rgba(0, 0, 0, 0.1)";
};

// ==================== SVG.js插件验证 ====================

/**
 * 验证SVG.js插件是否正确加载
 */
const validateSVGPlugins = () => {
  console.log("🔍 验证SVG.js插件加载状态...");

  // 检查SVG.js核心
  if (typeof SVG !== "undefined") {
    console.log("✅ SVG.js 核心已加载");

    // 检查draggable插件
    if (SVG.Element.prototype.draggable) {
      console.log("✅ SVG.js draggable 插件已加载");
      console.log("draggable方法:", typeof SVG.Element.prototype.draggable);
    } else {
      console.error("❌ SVG.js draggable 插件未加载");
    }

    // 检查resize插件
    if (SVG.Element.prototype.resize) {
      console.log("✅ SVG.js resize 插件已加载");
    } else {
      console.error("❌ SVG.js resize 插件未加载");
    }

    // 检查select插件
    if (SVG.Element.prototype.select) {
      console.log("✅ SVG.js select 插件已加载");
    } else {
      console.error("❌ SVG.js select 插件未加载");
    }

    // 检查draw插件
    if (SVG.Element.prototype.draw) {
      console.log("✅ SVG.js draw 插件已加载");
    } else {
      console.error("❌ SVG.js draw 插件未加载");
    }
  } else {
    console.error("❌ SVG.js 核心未加载");
  }

  // 检查全局对象
  console.log("全局SVG对象:", window.SVG);
  console.log("SVG.Element原型:", SVG.Element.prototype);
};

/**
 * 清理无效元素，移除已被删除的元素
 */
const cleanupInvalidElements = () => {
  // const validElements = allElements.value.filter((el) => {
  //   if (!el || !el.node || !document.contains(el.node)) {
  //     console.log("🧹 清理无效元素:", el);
  //     return false;
  //   }
  //   return true;
  // });
  // if (validElements.length !== allElements.value.length) {
  //   console.log(
  //     `🧹 清理了 ${allElements.value.length - validElements.length} 个无效元素`
  //   );
  //   allElements.value = validElements;
  // }
};

/**
 * 强制恢复所有元素的拖拽状态（用于调试）
 */
const forceRestoreDragState = () => {
  console.log("🔧 强制恢复拖拽状态");

  // 先清理无效元素
  cleanupInvalidElements();

  allElements.value.forEach((el, index) => {
    // 安全检查：确保元素有效
    if (!el || !el.node || !document.contains(el.node)) {
      console.warn("⚠️ forceRestoreDragState: 跳过无效元素", index);
      return;
    }

    // 强制恢复拖拽功能
    try {
      if (typeof el.draggable === "function") {
        el.draggable();
      } else {
        console.warn(
          `⚠️ 元素没有draggable方法 ${index}:`,
          el.type,
          "ID:",
          el.data("elementId")
        );
      }
    } catch (error) {
      console.error(`❌ 恢复拖拽时出错 ${index}:`, error);
    }

    // 清除拖拽优先级标记
    el.data("dragPriority", false);
  });
};

/**
 * 恢复所有元素的正常拖拽状态
 */
const restoreNormalDragState = () => {
  // 优化：只在必要时清理无效元素
  if (allElements.value.length > 0) {
    cleanupInvalidElements();
  }

  // 简化循环，减少不必要的操作
  allElements.value.forEach((el) => {
    if (el && el.node && document.contains(el.node)) {
      try {
        el.draggable();
        el.data("dragPriority", false);

        // 设置拖动样式
        el.style("cursor", "move");
      } catch (error) {
        // 静默处理错误，避免影响性能
      }
    }
  });
};

// ==================== 简化的控制点系统 ====================

/**
 * 为元素添加调整大小的控制点
 * @param {Object} element - SVG元素对象
 */
const addResizeHandles = (element) => {
  // 安全检查：确保元素存在且有效
  if (!element) {
    console.warn("⚠️ addResizeHandles: element 为 null 或 undefined");
    return;
  }

  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn("⚠️ addResizeHandles: element.node 为 null，元素可能已被删除");
    return;
  }

  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn("⚠️ addResizeHandles: 元素已不在DOM中");
    return;
  }

  // debugger
  // 先清除之前的控制点
  hideResizeHandles(element);

  // 检查是否已经有控制点
  if (element.data("resizeHandlesCount")) {
    console.log("元素已有控制点，跳过创建");
    return;
  }

  const type = element.type;
  let bbox;

  if (type === "rect") {
    bbox = {
      x: element.x(),
      y: element.y(),
      width: element.width(),
      height: element.height(),
    };
  } else if (type === "ellipse") {
    const cx = element.cx();
    const cy = element.cy();
    const rx = element.rx();
    const ry = element.ry();
    bbox = {
      x: cx - rx,
      y: cy - ry,
      width: rx * 2,
      height: ry * 2,
    };
  } else if (type === "polygon") {
    const points = element.array();
    let minX = points[0],
      maxX = points[0];
    let minY = points[1],
      maxY = points[1];

    for (let i = 0; i < points.length; i += 2) {
      minX = Math.min(minX, points[i]);
      maxX = Math.max(maxX, points[i]);
      minY = Math.min(minY, points[i + 1]);
      maxY = Math.max(maxY, points[i + 1]);
    }

    bbox = {
      x: minX,
      y: minY,
      width: maxX - minX,
      height: maxY - minY,
    };
  }

  if (!bbox) return;

  // 创建8个控制点
  const handles = [];
  const handleSize = 12; // 增加缩放点大小，提高交互体验

  // 角落控制点
  const corners = [
    { x: bbox.x, y: bbox.y, cursor: "nw-resize", class: "nw" },
    { x: bbox.x + bbox.width, y: bbox.y, cursor: "ne-resize", class: "ne" },
    { x: bbox.x, y: bbox.y + bbox.height, cursor: "sw-resize", class: "sw" },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height, cursor: "se-resize", class: "se" },
  ];

  // 边缘控制点
  const edges = [
    { x: bbox.x + bbox.width / 2, y: bbox.y, cursor: "n-resize", class: "n" },
    {
      x: bbox.x + bbox.width / 2,
      y: bbox.y + bbox.height,
      cursor: "s-resize",
      class: "s",
    },
    {
      x: bbox.x + bbox.width,
      y: bbox.y + bbox.height / 2,
      cursor: "e-resize",
      class: "e",
    },
    { x: bbox.x, y: bbox.y + bbox.height / 2, cursor: "w-resize", class: "w" },
  ];

  // 获取元素ID，避免在闭包中引用element对象
  const elementId = element.data("elementId");
  console.log("hideResizeHandles33");
  [...corners, ...edges].forEach((pos, index) => {
    const handle = svgDoc.value
      .rect(handleSize, handleSize)
      .attr({
        x: pos.x - handleSize / 2,
        y: pos.y - handleSize / 2,
        fill: "#ffffff",
        stroke: "#666666",
        strokeWidth: 1,
      })
      .style("cursor", pos.cursor)
      .draggable();

    // 使用正确的事件名称绑定拖拽事件
    handle.on("dragstart", function (event) {
      console.log("🎯 控制点拖拽开始:", pos.class);
      console.log("🔍 拖拽开始事件对象:", {
        type: event.type,
        keys: Object.keys(event),
        detail: event.detail,
        originalEvent: event.originalEvent,
      });

      // 阻止事件冒泡和默认行为
      if (event.stopPropagation) event.stopPropagation();
      if (event.preventDefault) event.preventDefault();

      dragging.value = true;

      // 重新获取当前元素的边界框，确保数据是最新的
      let currentBbox;
      if (element.type === "rect") {
        currentBbox = {
          x: element.x(),
          y: element.y(),
          width: element.width(),
          height: element.height(),
        };
      } else if (element.type === "ellipse") {
        const cx = element.cx();
        const cy = element.cy();
        const rx = element.rx();
        const ry = element.ry();
        currentBbox = {
          x: cx - rx,
          y: cy - ry,
          width: rx * 2,
          height: ry * 2,
        };
      }

      // 存储开始时的边界框和鼠标位置
      this.data("startBbox", currentBbox);
      this.data("startMousePos", getMousePosition(event));
      this.data("handleClass", pos.class);
      this.data("elementId", elementId);
    });

    handle.on("dragmove", function (event) {
      // 使用 requestAnimationFrame 优化性能，减少日志输出
      if (this._dragFrame) {
        cancelAnimationFrame(this._dragFrame);
      }

      this._dragFrame = requestAnimationFrame(() => {
        // 阻止事件冒泡和默认行为
        if (event.stopPropagation) event.stopPropagation();
        if (event.preventDefault) event.preventDefault();

        const startBbox = this.data("startBbox");
        const startMousePos = this.data("startMousePos");
        const handleClass = this.data("handleClass");
        const currentElementId = this.data("elementId");
        const currentMousePos = getMousePosition(event);

        // 验证数据有效性
        if (!startBbox || !startMousePos || !currentMousePos) {
          return;
        }

        // 验证鼠标位置数据的有效性
        if (
          typeof startMousePos.x !== "number" ||
          typeof startMousePos.y !== "number" ||
          typeof currentMousePos.x !== "number" ||
          typeof currentMousePos.y !== "number"
        ) {
          return;
        }

        // 验证鼠标位置数据是否为 NaN
        if (
          isNaN(startMousePos.x) ||
          isNaN(startMousePos.y) ||
          isNaN(currentMousePos.x) ||
          isNaN(currentMousePos.y)
        ) {
          return;
        }

        // 计算鼠标移动的距离
        const deltaX = currentMousePos.x - startMousePos.x;
        const deltaY = currentMousePos.y - startMousePos.y;

        // 验证增量值的有效性
        if (isNaN(deltaX) || isNaN(deltaY)) {
          return;
        }

        // 调用缩放函数
        if (currentElementId) {
          const targetElement = allElements.value.find(
            (el) => el.data("elementId") === currentElementId
          );
          if (targetElement) {
            resizeElement(targetElement, handleClass, startBbox, deltaX, deltaY);
          }
        }
      });
    });

    handle.on("dragend", function (event) {
      console.log("🎯 控制点拖拽结束:", pos.class);

      // 阻止事件冒泡和默认行为
      if (event.stopPropagation) event.stopPropagation();
      if (event.preventDefault) event.preventDefault();

      dragging.value = false;
    });

    // 为控制点添加特殊标识，防止被误选
    handle.addClass("resize-handle");
    handle.data("isResizeHandle", true);

    handles.push(handle);
  });

  // 安全地存储控制点引用，避免循环引用
  // 不直接存储handles数组，而是存储控制点的位置信息
  const handlePositions = handles.map((handle) => ({
    x: handle.x(),
    y: handle.y(),
    class: handle.data("handleClass"),
  }));
  // 安全地存储控制点信息，避免循环引用
  // 只存储必要的信息，不存储SVG.js对象
  element.data("resizeHandlesCount", handles.length);
  element.data("bbox", {
    x: bbox.x,
    y: bbox.y,
    width: bbox.width,
    height: bbox.height,
  });

  // 为每个控制点添加唯一标识，方便后续查找
  handles.forEach((handle, index) => {
    // 使用SVG.js的attr方法设置属性
    handle.attr("data-handle-index", index);
    handle.attr("data-element-id", element.data("elementId"));
  });

  // 将控制点存储到全局管理器中，避免循环引用
  if (!window.resizeHandlesManager) {
    window.resizeHandlesManager = new Map();
  }
  window.resizeHandlesManager.set(element.data("elementId"), handles);
};

/**
 * 调整元素大小
 * @param {Object} element - SVG元素对象
 * @param {string} handleClass - 控制点类型
 * @param {Object} startBbox - 开始时的边界框
 * @param {number} deltaX - X方向变化量
 * @param {number} deltaY - Y方向变化量
 */
const resizeElement = (element, handleClass, startBbox, deltaX, deltaY) => {
  // 验证输入数据的有效性
  if (
    !startBbox ||
    typeof startBbox.x !== "number" ||
    typeof startBbox.y !== "number" ||
    typeof startBbox.width !== "number" ||
    typeof startBbox.height !== "number"
  ) {
    return;
  }

  if (typeof deltaX !== "number" || typeof deltaY !== "number") {
    return;
  }

  // 验证起始边界框的有效性
  if (startBbox.width <= 0 || startBbox.height <= 0) {
    return;
  }

  const type = element.type;
  let newBbox = { ...startBbox };

  // 根据控制点类型计算新的边界框
  switch (handleClass) {
    case "nw": // 西北角 - 左上角拖拽
      newBbox.x = startBbox.x + deltaX;
      newBbox.y = startBbox.y + deltaY;
      newBbox.width = startBbox.width - deltaX;
      newBbox.height = startBbox.height - deltaY;
      break;
    case "ne": // 东北角 - 右上角拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y + deltaY;
      newBbox.width = startBbox.width + deltaX;
      newBbox.height = startBbox.height - deltaY;
      break;
    case "sw": // 西南角 - 左下角拖拽
      newBbox.x = startBbox.x + deltaX;
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width - deltaX;
      newBbox.height = startBbox.height + deltaY;
      break;
    case "se": // 东南角 - 右下角拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width + deltaX;
      newBbox.height = startBbox.height + deltaY;
      break;
    case "n": // 北边 - 上边拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y + deltaY;
      newBbox.width = startBbox.width; // 宽度不变
      newBbox.height = startBbox.height - deltaY;
      break;
    case "s": // 南边 - 下边拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width; // 宽度不变
      newBbox.height = startBbox.height + deltaY;
      break;
    case "e": // 东边 - 右边拖拽
      newBbox.x = startBbox.x; // x不变
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width + deltaX;
      newBbox.height = startBbox.height; // 高度不变
      break;
    case "w": // 西边 - 左边拖拽
      newBbox.x = startBbox.x + deltaX;
      newBbox.y = startBbox.y; // y不变
      newBbox.width = startBbox.width - deltaX;
      newBbox.height = startBbox.height; // 高度不变
      break;
    default:
      return;
  }

  // 验证计算结果的有效性
  if (
    isNaN(newBbox.x) ||
    isNaN(newBbox.y) ||
    isNaN(newBbox.width) ||
    isNaN(newBbox.height)
  ) {
    return;
  }

  // 确保最小尺寸和位置约束
  if (newBbox.width < 10) {
    if (handleClass === "nw" || handleClass === "sw") {
      newBbox.x = startBbox.x + startBbox.width - 10;
    }
    newBbox.width = 10;
  }
  if (newBbox.height < 10) {
    if (handleClass === "nw" || handleClass === "ne") {
      newBbox.y = startBbox.y + startBbox.height - 10;
    }
    newBbox.height = 10;
  }

  // 确保最小尺寸
  newBbox.width = Math.max(10, newBbox.width);
  newBbox.height = Math.max(10, newBbox.height);

  // 更新元素属性
  if (type === "rect") {
 

    // 更新元素属性
    element.attr({
      x: newBbox.x,
      y: newBbox.y,
      width: newBbox.width,
      height: newBbox.height,
      position: [
        newBbox.x,
        newBbox.y,
        newBbox.x + newBbox.width,
        newBbox.y,
        newBbox.x + newBbox.width,
        newBbox.y + newBbox.height,
        newBbox.x,
        newBbox.y + newBbox.height,
      ],
    });

    // 使用通用函数更新数据
    updateRectData(element);
  } else if (type === "ellipse") {
    element.attr({
      cx: newBbox.x + newBbox.width / 2,
      cy: newBbox.y + newBbox.height / 2,
      rx: newBbox.width / 2,
      ry: newBbox.height / 2,
    });
  } else if (type === "polygon") {
    const centerX = newBbox.x + newBbox.width / 2;
    const centerY = newBbox.y + newBbox.height / 2;
    const halfWidth = newBbox.width / 2;
    const halfHeight = newBbox.height / 2;

    element.plot([
      centerX,
      centerY - halfHeight,
      centerX + halfWidth,
      centerY + halfHeight,
      centerX - halfWidth,
      centerY + halfHeight,
    ]);
  }

  // 立即更新控制点位置，确保同步
  try {
    // 重新计算实际的边界框（基于更新后的元素属性）
    let actualBbox = newBbox;
    if (type === "rect") {
      actualBbox = {
        x: element.x(),
        y: element.y(),
        width: element.width(),
        height: element.height(),
      };
    } else if (type === "ellipse") {
      const cx = element.cx();
      const cy = element.cy();
      const rx = element.rx();
      const ry = element.ry();
      actualBbox = {
        x: cx - rx,
        y: cy - ry,
        width: rx * 2,
        height: ry * 2,
      };
    }

    // 立即更新控制点位置
    updateResizeHandles(element, actualBbox);

    // 同时更新元素的边界框数据
    element.data("bbox", actualBbox);
  } catch (error) {
    console.error("❌ 更新控制点位置时出错:", error);
  }
};

/**
 * 更新调整大小控制点的位置
 * @param {Object} element - SVG元素对象
 * @param {Object} bbox - 新的边界框
 */
const updateResizeHandles = (element, bbox) => {
  // 从全局管理器获取控制点
  const handles = window.resizeHandlesManager?.get(element.data("elementId"));
  if (!handles || handles.length === 0) return;

  const handleSize = 12; // 增加缩放点大小，提高交互体验

  // 确保边界框数据有效
  if (
    !bbox ||
    typeof bbox.x !== "number" ||
    typeof bbox.y !== "number" ||
    typeof bbox.width !== "number" ||
    typeof bbox.height !== "number"
  ) {
    console.warn("无效的边界框数据:", bbox);
    return;
  }

  // 更新角落控制点
  const corners = [
    { x: bbox.x, y: bbox.y, class: "nw" },
    { x: bbox.x + bbox.width, y: bbox.y, class: "ne" },
    { x: bbox.x, y: bbox.y + bbox.height, class: "sw" },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height, class: "se" },
  ];

  // 更新边缘控制点
  const edges = [
    { x: bbox.x + bbox.width / 2, y: bbox.y, class: "n" },
    { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height, class: "s" },
    { x: bbox.x + bbox.width, y: bbox.y + bbox.height / 2, class: "e" },
    { x: bbox.x, y: bbox.y + bbox.height / 2, class: "w" },
  ];

  [...corners, ...edges].forEach((pos, index) => {
    if (handles[index]) {
      try {
        // 确保位置数据有效
        if (typeof pos.x === "number" && typeof pos.y === "number") {
          // 使用SVG.js的attr方法设置位置
          handles[index].attr({
            x: pos.x - handleSize / 2,
            y: pos.y - handleSize / 2,
          });
        }
      } catch (error) {
        console.warn("更新控制点位置时出错:", error);
      }
    }
  });
};

/**
 * 安全地更新控制点位置
 * @param {Object} element - SVG元素对象
 */
const safeUpdateResizeHandlesPosition = (element) => {
  if (!element) {
    console.warn("⚠️ safeUpdateResizeHandlesPosition: element 为 null 或 undefined");
    return;
  }
  updateResizeHandlesPosition(element);
};

/**
 * 实时更新控制点位置，跟随元素移动
 * @param {Object} element - SVG元素对象
 */
const updateResizeHandlesPosition = (element) => {
  // 快速检查
  if (!element || !element.data("resizeHandlesCount")) return;

  const type = element.type;
  let bbox;

  // 获取元素的当前边界框（只处理矩形，简化逻辑）
  if (type === "rect") {
    bbox = {
      x: element.x(),
      y: element.y(),
      width: element.width(),
      height: element.height(),
    };
  } else {
    return; // 暂时只处理矩形
  }

  if (!bbox) return;

  // 更新控制点位置
  updateResizeHandles(element, bbox);

  // 缓存边界框数据
  element.data("bbox", bbox);
};

/**
 * 隐藏元素的所有调整大小控制点
 * @param {Object} element - SVG元素对象
 */
const hideResizeHandles = (element) => {
  // 从全局管理器获取控制点
  const handles = window.resizeHandlesManager?.get(element.data("elementId"));
  if (!handles) return;

  // 强制移除所有控制点
  handles.forEach((handle) => {
    try {
      // 先移除拖拽功能
      if (handle.draggable) {
        handle.draggable(false);
      }
      // 再移除元素
      if (handle.remove) {
        handle.remove();
      }
    } catch (error) {
      console.warn("移除控制点时出错:", error);
    }
  });

  // 从全局管理器中移除
  window.resizeHandlesManager.delete(element.data("elementId"));

  // 清除数据引用
  element.data("resizeHandlesCount", null);
  element.data("bbox", null);
};

/**
 * 清理所有残留的控制点（全局清理）
 */
const cleanupAllResizeHandles = () => {
  // 清理全局管理器中的所有控制点
  if (window.resizeHandlesManager) {
    window.resizeHandlesManager.forEach((handles, elementId) => {
      handles.forEach((handle) => {
        try {
          if (handle.draggable) {
            handle.draggable(false);
          }
          if (handle.remove) {
            handle.remove();
          }
        } catch (error) {
          console.warn("清理控制点时出错:", error);
        }
      });
    });
    window.resizeHandlesManager.clear();
  }

  // 清理所有元素的数据
  allElements.value.forEach((element) => {
    element.data("resizeHandlesCount", null);
    element.data("bbox", null);
  });

  console.log("✅ 已清理所有控制点");
};

/**
 * 删除选中的矩形
 */
const deleteSelectedRectangle = () => {
  if (!selectedElement.value || selectedElement.value.type !== "rect") {
    console.log("⚠️ 没有选中的矩形，无法删除");
    return;
  }

  try {
    const rectElement = selectedElement.value;

    // 删除序号文字
    const elementId = rectElement.data("elementId");
    if (elementId) {
      const textElement = window.rectTextMap?.get(elementId);
      if (textElement) {
        textElement.remove();
        // 从映射中移除
        window.rectTextMap.delete(elementId);
        console.log("✅ 已删除序号文字");
      }
    }

    // 从元素列表中移除矩形和文字
    const rectIndex = allElements.value.indexOf(rectElement);
    if (rectIndex > -1) {
      allElements.value.splice(rectIndex, 1);
    }

    // 删除矩形元素
    rectElement.remove();

    // 清除选择状态
    selectedElement.value = null;

    // 隐藏所有控制点
    cleanupAllResizeHandles();

    console.log("✅ 已删除选中的矩形");
  } catch (error) {
    console.error("❌ 删除矩形失败:", error);
  }
};

/**
 * 启动绘制模式鼠标样式监控
 */
const startDrawingModeCursorMonitor = () => {
  // 清除之前的监控器
  if (window._cursorMonitorInterval) {
    clearInterval(window._cursorMonitorInterval);
  }

  // 创建新的监控器，每200ms检查一次鼠标样式（降低频率）
  window._cursorMonitorInterval = setInterval(() => {
    if (drawingMode.value && !dragging.value) {
      // 只在非拖拽状态下检查鼠标样式，避免拖拽时的重复设置
      checkAndSetDrawingCursor();
    }
  }, 200);

  console.log("✅ 绘制模式鼠标样式监控已启动");
};

/**
 * 强制设置绘制模式鼠标样式（完整版本，用于关键时机）
 */
const forceDrawingModeCursor = () => {
  if (!drawingMode.value) return;

  try {
    // 使用多种方式强制设置鼠标样式
    if (svgCanvas.value) {
      svgCanvas.value.style.cursor = "crosshair";
      svgCanvas.value.style.setProperty("cursor", "crosshair", "important");
    }

    // 设置body的鼠标样式
    document.body.style.cursor = "crosshair";
    document.body.style.setProperty("cursor", "crosshair", "important");

    // 设置html的鼠标样式
    document.documentElement.style.cursor = "crosshair";
    document.documentElement.style.setProperty("cursor", "crosshair", "important");

    // 强制覆盖所有可能的鼠标样式
    const style = document.createElement("style");
    style.id = "force-drawing-cursor";
    style.textContent = `
      * {
        cursor: crosshair !important;
      }
    `;

    // 移除旧的样式
    const oldStyle = document.getElementById("force-drawing-cursor");
    if (oldStyle) {
      oldStyle.remove();
    }

    // 添加新样式
    document.head.appendChild(style);

    console.log("✅ 强制设置绘制模式鼠标样式");
  } catch (error) {
    console.error("❌ 强制设置鼠标样式失败:", error);
  }
};

/**
 * 轻量级鼠标样式检查和设置（用于定时监控）
 */
const checkAndSetDrawingCursor = () => {
  if (!drawingMode.value) return;

  try {
    // 只在必要时设置鼠标样式，避免重复操作
    let needsUpdate = false;

    // 检查画布鼠标样式
    if (svgCanvas.value && svgCanvas.value.style.cursor !== "crosshair") {
      svgCanvas.value.style.cursor = "crosshair";
      needsUpdate = true;
    }

    // 检查body鼠标样式
    if (document.body.style.cursor !== "crosshair") {
      document.body.style.cursor = "crosshair";
      needsUpdate = true;
    }

    // 只在需要更新时记录日志
    if (needsUpdate) {
      console.log("🔍 检测到鼠标样式被覆盖，已恢复");
    }
  } catch (error) {
    console.error("❌ 检查鼠标样式失败:", error);
  }
};

/**
 * 恢复默认鼠标样式
 */
const restoreNormalCursor = () => {
  try {
    // 移除强制绘制的鼠标样式
    const forceStyle = document.getElementById("force-drawing-cursor");
    if (forceStyle) {
      forceStyle.remove();
    }

    // 恢复默认鼠标样式
    if (svgCanvas.value) {
      svgCanvas.value.style.cursor = "default";
      svgCanvas.value.style.removeProperty("cursor");
    }

    document.body.style.cursor = "default";
    document.body.style.removeProperty("cursor");

    document.documentElement.style.cursor = "default";
    document.documentElement.style.removeProperty("cursor");

    // console.log("✅ 已恢复默认鼠标样式");
  } catch (error) {
    console.error("❌ 恢复默认鼠标样式失败:", error);
  }
};

/**
 * 重新激活绘制模式
 */
const reactivateDrawingMode = () => {
  if (!drawingMode.value || !svgCanvas.value) return;

  try {
    console.log("🔄 重新激活绘制模式...");

    // 重新设置绘制模式状态
    drawing.value = false;
    currentElement.value = null;
    startPoint.value = null;

    // 重新添加点击事件监听器
    if (window._rectClickHandler) {
      svgCanvas.value.removeEventListener("click", window._rectClickHandler, {
        capture: true,
      });
    }

    // 重新创建点击事件处理器
    window._rectClickHandler = (event) => {
      console.log("🎯 重新激活的矩形绘制点击事件被触发", {
        target: event.target,
        currentTarget: event.currentTarget,
        drawingMode: drawingMode.value,
        viewport: {
          scale: viewport.value.scale,
          translateX: viewport.value.translateX,
          translateY: viewport.value.translateY,
        },
      });

      // 添加事件ID，防止重复处理
      if (event._rectClickProcessed) {
        console.log("🚫 事件已被处理，跳过重复处理");
        return;
      }
      event._rectClickProcessed = true;

      // 在绘制模式下，阻止事件冒泡，防止触发其他选择逻辑
      event.stopPropagation();
      event.preventDefault();

      handleRectClick(event);
    };

    // 重新添加点击事件监听器
    svgCanvas.value.addEventListener("click", window._rectClickHandler, {
      capture: true,
    });

    // 强制设置鼠标样式
    forceDrawingModeCursor();
  } catch (error) {
    console.error("❌ 重新激活绘制模式失败:", error);
  }
};

/**
 * 显示元素的所有调整大小控制点
 * @param {Object} element - SVG元素对象
 */
const showResizeHandles = (element) => {
  // 安全检查：确保元素存在且有效
  if (!element) {
    console.warn("⚠️ showResizeHandles: element 为 null 或 undefined");
    return;
  }

  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn("⚠️ showResizeHandles: element.node 为 null，元素可能已被删除");
    return;
  }

  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn("⚠️ showResizeHandles: 元素已不在DOM中");
    return;
  }

  // 确保元素有类型属性
  if (!element.type) {
    console.warn("元素缺少类型属性，无法显示控制点");
    return;
  }

  // 重要：在显示新控制点之前，先隐藏所有其他元素的控制点
  // 确保只有当前激活的元素显示控制点
  allElements.value.forEach((el) => {
    if (el && el !== element && el.data("resizeHandlesCount")) {
      hideResizeHandles(el);
    }
  });

  // 检查是否已经有控制点
  if (element.data("resizeHandlesCount")) {
    console.log("元素已有控制点，跳过创建");
    return;
  }

  // 添加控制点
  addResizeHandles(element);

  // 确保控制点在最上层
  const handles = window.resizeHandlesManager?.get(element.data("elementId"));
  if (handles) {
    handles.forEach((handle) => {
      if (handle && handle.front) {
        handle.front();
      }
    });
  }
};

// ==================== 形状绘制功能 ====================

/**
 * 选择要绘制的形状类型
 * @param {string} shape - 形状类型：'rect', 'ellipse', 'polygon'
 */
const selectShape = (shape) => {
  currentShape.value = shape;
  drawingMode.value = true; // 进入绘制模式

  clearSelection(); // 切换形状时清除选择

  // 如果选择矩形，进入点击绘制模式
  if (shape === "rect") {
    console.log("🎯 进入矩形绘制模式");
    enterRectDrawingMode();
  }
};

/**
 * 添加绘制模式的事件阻止器
 * 防止拖拽事件干扰绘制操作
 */
const addDrawingEventBlocker = () => {
  if (!svgCanvas.value) return;

  console.log("🔒 绘制模式下禁用所有元素的拖拽功能");

  // 禁用所有现有元素的拖拽功能
  allElements.value.forEach((el) => {
    if (el && el.draggable) {
      el.draggable(false);
      console.log("🔒 禁用元素拖拽:", el.type);
    }
  });
};

/**
 * 移除绘制模式的事件阻止器
 */
const removeDrawingEventBlocker = () => {
  if (!svgCanvas.value) return;

  console.log("🔓 绘制完成后恢复所有元素的拖拽功能");

  // 恢复所有元素的拖拽功能
  allElements.value.forEach((el) => {
    if (el && el.draggable === false) {
      // 检查是否有原始拖拽状态记录
      const originalDraggable = el.data("originalDraggable");
      if (originalDraggable !== undefined) {
        el.draggable(originalDraggable);
        el.data("originalDraggable", null); // 清理记录
        console.log("🔓 恢复元素拖拽:", el.type, "原始状态:", originalDraggable);
      } else {
        el.draggable(true);
        console.log("🔓 恢复元素拖拽:", el.type);
      }
    }
  });
};

/**
 * 在绘制模式下，临时禁用所有现有矩形的拖拽功能
 */
const disableExistingRectanglesDrag = () => {
  console.log("🔒 绘制模式下，临时禁用所有现有矩形的拖拽功能");

  allElements.value.forEach((el) => {
    if (el && el.type === "rect" && el.draggable !== false) {
      // 记录原始拖拽状态
      el.data("originalDraggable", el.draggable);
      el.draggable(false);
      console.log("🔒 禁用矩形拖拽:", el.type);
    }
  });
};

/**
 * 进入矩形点击绘制模式
 */
const enterRectDrawingMode = () => {
  // 设置绘制状态
  drawing.value = false; // 还未开始绘制
  currentElement.value = null;
  startPoint.value = null;

  // 在绘制模式下，临时禁用所有现有矩形的拖拽功能
  // 防止拖拽事件干扰绘制操作
  disableExistingRectanglesDrag();

  // 设置绘制模式下的鼠标样式为 + 号
  forceDrawingModeCursor();

  // 添加点击事件监听器
  if (svgCanvas.value) {
    // 先清理所有可能存在的矩形绘制事件监听器
    cleanupRectDrawingListeners();

    // 创建新的点击事件处理器
    window._rectClickHandler = (event) => {
      // 添加事件ID，防止重复处理
      if (event._rectClickProcessed) {
        console.log("🚫 事件已被处理，跳过重复处理");
        return;
      }
      event._rectClickProcessed = true;

      // 在绘制模式下，阻止事件冒泡，防止触发其他选择逻辑
      event.stopPropagation();
      event.preventDefault();

      handleRectClick(event);
    };

    // 使用 capture: true，确保绘制事件在捕获阶段就被处理，优先级最高
    svgCanvas.value.addEventListener("click", window._rectClickHandler, {
      capture: true,
    });

    console.log("✅ 矩形点击绘制模式已启用");

    // 启动绘制模式鼠标样式监控
    startDrawingModeCursorMonitor();
  }
};

/**
 * 处理矩形点击绘制
 * @param {MouseEvent} event - 点击事件
 */
const handleRectClick = (event) => {
  // 防重复调用机制：如果正在处理点击事件，直接返回
  if (window._isProcessingClick) {
    console.log("🚫 正在处理点击事件，跳过重复调用");
    return;
  }

  // 设置处理标志
  window._isProcessingClick = true;

  // 添加调用栈跟踪，帮助调试重复点击问题
  console.log("🔍 handleRectClick 调用栈:", new Error().stack);

  if (!drawingMode.value) {
    console.log("❌ 不在绘制模式");
    window._isProcessingClick = false; // 重置标志
    return;
  }

  if (currentShape.value !== "rect") {
    console.log("❌ 不是矩形绘制模式");
    window._isProcessingClick = false; // 重置标志
    return;
  }

  const pos = getMousePosition(event);

  if (!startPoint.value) {
    // 第一次点击：设置起始点
    startPoint.value = pos;
    console.log("🎯 设置起始点:", pos);
    console.log("🔍 设置startPoint后立即检查:", {
      startPoint: startPoint.value,
      drawing: drawing.value,
      currentElement: !!currentElement.value,
    });
    console.log("设置修改后的", {
      x: pos.x - 80,
      y: pos.y - 60,
    });

    // 创建预览矩形
    currentElement.value = svgDoc.value
      .rect(0, 0)
      .attr({
        x: pos.x,
        y: pos.y,
        fill: "rgba(0, 0, 255, 0.1)",
        stroke: "blue",
        strokeWidth: 2,
      })
      .style("cursor", "move");

    // 开始绘制状态
    drawing.value = true;

    // 每次绘制都重新设置鼠标移动事件监听器
    if (svgCanvas.value) {
      // 先移除旧的鼠标移动事件监听器（如果存在）
      if (window._rectMoveHandler) {
        svgCanvas.value.removeEventListener("mousemove", window._rectMoveHandler);
      }

      // 创建新的鼠标移动事件监听器
      window._rectMoveHandler = (moveEvent) => {
        if (drawing.value && currentElement.value && startPoint.value) {
          updateRectDrawingClick(getMousePosition(moveEvent));
        }
      };
      svgCanvas.value.addEventListener("mousemove", window._rectMoveHandler);
      console.log("✅ 开始实时预览");
    }
  } else {
    // 更新矩形尺寸
    updateRectDrawingClick(pos);

    // 完成绘制
    finishRectDrawing();
  }

  // 清除处理标志
  window._isProcessingClick = false;
};

/**
 * 更新矩形绘制（鼠标移动时）
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updateRectDrawingClick = (pos) => {
  if (!currentElement.value || !startPoint.value) return;

  const width = pos.x - startPoint.value.x;
  const height = pos.y - startPoint.value.y;

  // 确保最小尺寸，避免绘制出0尺寸的矩形
  const minSize = 10;
  const finalWidth = Math.abs(width) < minSize ? minSize : Math.abs(width);
  const finalHeight = Math.abs(height) < minSize ? minSize : Math.abs(height);

  // 处理负值尺寸（从任意方向拖拽）
  if (width < 0) {
    currentElement.value.attr({ x: pos.x, width: finalWidth });
  } else {
    currentElement.value.attr({ x: startPoint.value.x, width: finalWidth });
  }

  if (height < 0) {
    currentElement.value.attr({ y: pos.y, height: finalHeight });
  } else {
    currentElement.value.attr({ y: startPoint.value.y, height: finalHeight });
  }

  // 添加调试信息
  // console.log("🔄 实时预览矩形:", {
  //   start: startPoint.value,
  //   current: pos,
  //   width: finalWidth,
  //   height: finalHeight,
  //   rect: {
  //     x: currentElement.value.x(),
  //     y: currentElement.value.y(),
  //     width: currentElement.value.width(),
  //     height: currentElement.value.height()
  //   }
  // });
};

function updateRectList(element, id) {
  // 获取矩形属性
  const elementId = element.data("elementId");
  const x = element.x();
  const y = element.y();
  const width = element.width();
  const height = element.height();

  // 计算position数组 [x1,y1,x2,y2,x3,y3,x4,y4]
  const position = [
    x,
    y, // 左上角
    x + width,
    y, // 右上角
    x + width,
    y + height, // 右下角
    x,
    y + height, // 左下角
  ];

  // 添加到矩形数据列表
  rectList.value.push({
    id: elementId,
    x,
    y,
    width,
    height,
    label: "",
    desc: "",
    position,
  });
  console.log("rectList.value==", rectList.value);
}

const updateRectData = (element) => {
  if (!element) return;

  const elementId = element.data("elementId");
  const index = rectList.value.findIndex((item) => item.id === elementId);

  if (index !== -1) {
      const newRectList = [...rectList.value];
    newRectList[index] = {
      ...newRectList[index],
      x: element.x(),
      y: element.y(),
      width: element.width(),
      height: element.height(),
      position: [
        element.x(),
        element.y(),
        element.x() + element.width(),
        element.y(),
        element.x() + element.width(),
        element.y() + element.height(),
        element.x(),
        element.y() + element.height(),
      ]
    };
    rectList.value = newRectList; // 整体赋值，触发 set 方法
    console.log("Updated rectList data for element:", elementId);
  }
};

/**
 * 完成矩形绘制
 */
const finishRectDrawing = () => {
  if (!currentElement.value) return;

  // 设置元素类型和ID
  currentElement.value.type = "rect";
  const eleId = `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  currentElement.value.data("elementId", eleId);
  // 添加到元素列表
  allElements.value.push(currentElement.value);

  // 为新元素添加拖拽功能和缩放点
  // 重要：先确保拖拽功能被正确启用
  try {
    currentElement.value.draggable(true);
    console.log("✅ 拖拽功能已启用");
  } catch (error) {
    console.error("❌ 启用拖拽功能失败:", error);
  }
  // 绘制完成保证所有矩形的拖动功能
  allElements.value.forEach((el) => {
    if (el && el.type === "rect") {
      el.draggable(true);
      console.log("🔒 禁用矩形拖拽:", el.type);
    }
  });

  // 为新元素添加拖拽事件监听器，确保拖拽时能正确激活
  // 使用闭包捕获元素引用，避免currentElement.value被清空后的问题
  const element = currentElement.value;
  // 创建矩形时更新标注json数据
  updateRectList(element, eleId);

  element.off("dragstart dragmove dragend");
  element.on("dragstart", () => {
    console.log("🎯 新绘制矩形开始拖拽");
    // 拖拽开始时，确保这个元素被选中
    if (selectedElement.value !== element) {
      // 临时允许选择
      const tempDrawingMode = drawingMode.value;
      drawingMode.value = false;
      selectElement(element);
      drawingMode.value = tempDrawingMode;
    }
    dragging.value = true;

    // 绘制模式下拖拽时，设置一次鼠标样式即可（拖拽过程中不需要重复设置）
    if (drawingMode.value) {
      if (svgCanvas.value) {
        svgCanvas.value.style.cursor = "crosshair";
      }
      document.body.style.cursor = "crosshair";
    }

    // 重要：拖拽开始时，记录绘制模式状态
    if (!window.dragStateMap) {
      window.dragStateMap = new Map();
    }
    const elementId =
      element.data("elementId") ||
      `drag_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    element.data("dragStateId", elementId);
    window.dragStateMap.set(elementId, { wasInDrawingMode: drawingMode.value });
    console.log("🔍 拖拽开始时记录绘制模式状态:", {
      wasInDrawingMode: drawingMode.value,
      currentDrawingMode: drawingMode.value,
      elementId: elementId,
    });
  });

  element.on("dragmove", () => {
    // 拖拽过程中，更新控制点位置
    if (selectedElement.value === element) {
      updateResizeHandlesPosition(element);
    }
  });

  element.on("dragend", () => {
    console.log("🎯 新绘制矩形拖拽结束");
    dragging.value = false;
    // 拖拽结束后，更新控制点位置
    updateResizeHandlesPosition(element);

    // 使用通用函数更新矩形数据
    updateRectData(element);

    // 如果拖拽前在绘制模式，但拖拽后绘制模式被意外关闭，则恢复
    const dragStateId = element.data("dragStateId");
    if (dragStateId) {
      const dragState = window.dragStateMap?.get(dragStateId);
      if (dragState?.wasInDrawingMode) {
        console.log("🔄 检测到拖拽前在绘制模式，现在确保绘制模式状态正确");

        // 如果绘制模式被意外关闭，则恢复
        if (!drawingMode.value) {
          drawingMode.value = true;
          console.log("✅ 已恢复绘制模式状态");
        }

        // 清理状态记录
        window.dragStateMap.delete(dragStateId);
        element.data("dragStateId", null);
      }
    }

    // 如果当前在绘制模式，确保鼠标样式正确
    if (drawingMode.value) {
      if (svgCanvas.value) {
        svgCanvas.value.style.cursor = "crosshair";
      }
      document.body.style.cursor = "crosshair";
      console.log("✅ 拖拽结束后恢复绘制模式鼠标样式");
    }

    // 重要：拖拽结束后，确保绘制功能正常工作
    // 检查事件监听器是否还存在
    if (drawingMode.value && svgCanvas.value) {
      console.log("🔄 拖拽后重新激活绘制模式");

      // 重新启动绘制模式的完整流程
      // 1. 重置绘制状态
      startPoint.value = null;
      drawing.value = false;
      currentElement.value = null;

      // 2. 重新设置鼠标样式
      forceDrawingModeCursor();

      // 3. 重新启动鼠标样式监控
      startDrawingModeCursorMonitor();

      // 4. 重新设置画布背景色
      if (svgCanvas.value) {
        svgCanvas.value.style.backgroundColor = "rgba(255, 165, 0, 0.05)";
      }

      // 5. 重新创建并添加点击事件监听器
      if (window._rectClickHandler) {
        // 先移除旧的监听器
        svgCanvas.value.removeEventListener("click", window._rectClickHandler, {
          capture: true,
        });
      }

      // 重新创建点击事件处理器
      window._rectClickHandler = (event) => {
        // 添加事件ID，防止重复处理
        if (event._rectClickProcessed) {
          console.log("🚫 事件已被处理，跳过重复处理");
          return;
        }
        event._rectClickProcessed = true;

        // 在绘制模式下，阻止事件冒泡，防止触发其他选择逻辑
        event.stopPropagation();
        event.preventDefault();

        handleRectClick(event);
      };

      // 重新添加点击事件监听器
      svgCanvas.value.addEventListener("click", window._rectClickHandler, {
        capture: true,
      });
      console.log("✅ 拖拽后已重新激活绘制模式，状态已重置");
    }
  });

  // 重要：在视口变换后，确保新绘制的矩形位置正确
  // 检查是否需要调整矩形位置以适应视口变换
  if (
    viewport.value.scale !== 1 ||
    viewport.value.translateX !== 0 ||
    viewport.value.translateY !== 0
  ) {
    // 获取矩形的当前属性
    const currentX = currentElement.value.x();
    const currentY = currentElement.value.y();
    const currentWidth = currentElement.value.width();
    const currentHeight = currentElement.value.height();

    console.log("矩形原始位置:", {
      x: currentX,
      y: currentY,
      width: currentWidth,
      height: currentHeight,
    });

    // 验证位置是否正确（在视口变换后，位置应该已经是正确的）
    const expectedX = startPoint.value.x;
    const expectedY = startPoint.value.y;

    if (Math.abs(currentX - expectedX) > 1 || Math.abs(currentY - expectedY) > 1) {
      console.warn("⚠️ 矩形位置可能不正确，尝试修正");
      currentElement.value.attr({
        x: expectedX,
        y: expectedY,
        width: currentWidth,
        height: currentHeight,
      });
    }
  }

  // 显示缩放点
  showResizeHandles(currentElement.value);

  // 选中新绘制的元素（绘制完成后，可以安全选择）
  // 注意：这里需要临时允许选择，因为绘制已经完成
  const tempDrawingMode = drawingMode.value;
  drawingMode.value = false; // 临时禁用绘制模式，允许选择

  selectElement(currentElement.value);

  // 恢复绘制模式状态
  drawingMode.value = tempDrawingMode;

  // 清理绘制状态
  drawing.value = false;
  currentElement.value = null;
  startPoint.value = null;

  // 退出绘制模式，恢复正常的交互功能
  // 每次绘制完成后都需要重新按N键进入绘制模式
  drawingMode.value = false;

  // 清理事件监听器
  cleanupRectDrawingListeners();

  // 恢复正常的鼠标样式和画布样式
  if (svgCanvas.value) {
    svgCanvas.value.style.backgroundColor = "white";
  }
  // 恢复默认鼠标样式
  restoreNormalCursor();

  // 停止绘制模式鼠标样式监控
  if (window._cursorMonitorInterval) {
    clearInterval(window._cursorMonitorInterval);
    window._cursorMonitorInterval = null;
    console.log("✅ 绘制模式鼠标样式监控已停止");
  }

  // 确保所有元素都有拖拽功能
  allElements.value.forEach((el) => {
    if (el && el.node && document.contains(el.node)) {
      try {
        if (!el.draggable) {
          el.draggable(true);
        }
        // 检查拖拽功能是否真的被启用
        console.log(`🔍 元素拖拽状态: ${el.type}, draggable=${!!el.draggable}`);
      } catch (error) {
        console.error("❌ 启用拖拽功能失败:", error);
      }
    }
  });
};

/**
 * 清理矩形绘制的事件监听器
 */
const cleanupRectDrawingListeners = () => {
  if (svgCanvas.value) {
    if (window._rectClickHandler) {
      svgCanvas.value.removeEventListener("click", window._rectClickHandler);
      window._rectClickHandler = null;
    }
    if (window._rectMoveHandler) {
      svgCanvas.value.removeEventListener("mousemove", window._rectMoveHandler);
      window._rectMoveHandler = null;
    }
  }
};

/**
 * 开始绘制流程
 * @param {MouseEvent} event - 鼠标按下事件
 */
const startDrawing = (event) => {
  // 只有在绘制模式下才允许绘制
  if (!drawingMode.value) {
    return;
  }

  console.log("🎨 开始绘制流程 - 设置绘制状态");

  const pos = getMousePosition(event);
  startPoint.value = pos;

  // 立即设置绘制状态，确保绘制优先级最高
  drawing.value = true;

  // 立即清除悬停状态，防止干扰绘制
  if (hoveredElement.value) {
    // hoveredElement.value.attr({
    //   stroke: getDefaultStroke(hoveredElement.value),
    //   strokeWidth: 2,
    //   "stroke-dasharray": "none",
    //   fill: getDefaultFill(hoveredElement.value),
    // });
    hoveredElement.value = null;
  }

  // 暂时移除事件阻止器，恢复原有功能

  switch (currentShape.value) {
    case "rect":
      startRectDrawing(pos);
      break;
  }
};

/**
 * 开始绘制矩形
 * @param {{x: number, y: number}} pos - 起始坐标
 */
const startRectDrawing = (pos) => {
  currentElement.value = svgDoc.value
    .rect(0, 0)
    .attr({
      x: pos.x,
      y: pos.y,
      fill: "rgba(0, 0, 255, 0.1)", // 极淡的蓝色填充，用于点击检测
      stroke: "blue",
      strokeWidth: 2,
    })
    .draggable()
    .style("cursor", "move"); // 恢复拖拽功能

  // 使用闭包捕获元素引用，避免引用被清空的 currentElement.value
  const element = currentElement.value;

  // 使用正确的事件名称绑定拖拽事件
  element.on("dragstart", () => {
    // 安全检查：确保元素存在
    if (!element) return;

    // 拖拽时总是激活被拖拽的元素，确保状态一致
    if (selectedElement.value !== element) {
      selectElement(element);
    }

    // 设置拖拽样式
    element.attr({
      "stroke-width": 4,
      stroke: "#ff0000",
      "fill-opacity": 0.6,
    });
    // 设置拖拽状态
    dragging.value = true;
  });

  element.on("dragmove", () => {
    // 拖拽过程中，只在必要时更新控制点位置
    if (selectedElement.value && dragging.value) {
      // 使用 requestAnimationFrame 优化性能，避免频繁更新
      if (!window._dragUpdateScheduled) {
        window._dragUpdateScheduled = true;
        requestAnimationFrame(() => {
          updateResizeHandlesPosition(selectedElement.value);
          window._dragUpdateScheduled = false;
        });
      }
    }
  });

  element.on("dragend", () => {
    if (!element) return;

    dragging.value = false;

    // 确保元素被选中
    if (selectedElement.value !== element) {
      selectElement(element);
    }

    // 恢复元素的正常选中样式
    selectedElement.value.attr({
      stroke: "#ff6b6b",
      "stroke-width": 3,
      "stroke-dasharray": "none",
      "fill-opacity": 0.2,
    });

    // 恢复所有元素的正常拖拽状态
    restoreNormalDragState();

    // 使用 requestAnimationFrame 延迟更新控制点位置，提高性能
    requestAnimationFrame(() => {
      if (selectedElement.value === element) {
        updateResizeHandlesPosition(element);
      }
    });
  });

  // 设置元素类型并添加到列表
  currentElement.value.type = "rect";
  currentElement.value.data(
    "elementId",
    `element_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
  );

  allElements.value.push(currentElement.value);
  console.log("allElements.value--", allElements.value);

  // 确保绘制状态已设置
  drawing.value = true;
};

/**
 * 结束绘制流程
 */
const stopDrawing = () => {
  // 如果正在拖拽，不结束绘制流程
  if (dragging.value) {
    console.log("⚠️ 正在拖拽中，不结束绘制流程");
    return;
  }

  if (currentElement.value) {
    // 确保绘制完成的元素没有控制点
    hideResizeHandles(currentElement.value);
    // debugger
    currentElement.value.data("bbox", null);
  }

  drawing.value = false;
  // return
  currentElement.value = null;

  // 恢复原有的绘制完成逻辑

  // 绘制完成后自动退出绘制模式
  drawingMode.value = false;
};

/**
 * 更新绘制中的形状（鼠标移动时）
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updateDrawingShape = (pos) => {
  if (!drawing.value || !currentElement.value) return;

  switch (currentShape.value) {
    case "rect":
      updateRectDrawing(pos);
      break;
  }
};

/**
 * 更新矩形绘制
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const updateRectDrawing = (pos) => {
  const width = pos.x - startPoint.value.x;
  const height = pos.y - startPoint.value.y;

  // 处理负值尺寸（从任意方向拖拽）
  if (width < 0) {
    currentElement.value.attr({ x: pos.x, width: Math.abs(width) });
  } else {
    currentElement.value.attr({ width: width });
  }

  if (height < 0) {
    currentElement.value.attr({ y: pos.y, height: Math.abs(height) });
  } else {
    currentElement.value.attr({ height: height });
  }
};

// ==================== 元素检测与选择功能 ====================

/**
 * 判断点是否在元素内
 * @param {{x: number, y: number}} pos - 要检测的点坐标
 * @param {Object} element - SVG元素对象
 * @returns {boolean} 是否在元素内
 */
const isPointInElement = (pos, element) => {
  const type = element.type;

  switch (type) {
    case "rect":
      return isPointInRect(pos, element);
    default:
      return false;
  }
};

/**
 * 检测点是否在矩形内
 * @param {{x: number, y: number}} pos - 点坐标
 * @param {Object} element - 矩形元素
 * @returns {boolean} 是否在矩形内
 */
const isPointInRect = (pos, element) => {
  const x = element.x();
  const y = element.y();
  const width = element.width();
  const height = element.height();

  // 添加容差，让边缘区域也容易被选中
  const tolerance = 2;
  return (
    pos.x >= x - tolerance &&
    pos.x <= x + width + tolerance &&
    pos.y >= y - tolerance &&
    pos.y <= y + height + tolerance
  );
};

/**
 * 计算元素面积
 * @param {Object} element - SVG元素对象
 * @returns {number} 面积值
 */
const calculateElementArea = (element) => {
  const type = element.type;

  try {
    switch (type) {
      case "rect":
        const width = Math.max(0, element.width());
        const height = Math.max(0, element.height());
        return width * height;
      default:
        return 0;
    }
  } catch (error) {
    console.error("计算面积时出错:", error);
    return 0;
  }
};

/**
 * 在指定位置查找元素（透视层选择）
 * @param {{x: number, y: number}} pos - 查找位置
 * @returns {Object|null} 找到的元素或null
 */
const findElementAtPosition = (pos) => {
  // 性能优化：如果正在拖拽，直接返回当前选中的元素
  if (dragging.value && selectedElement.value) {
    return selectedElement.value;
  }

  // 重要：如果当前有选中的元素，检查鼠标是否在其区域内
  // 但如果有其他元素也在该位置，需要智能选择
  if (selectedElement.value && isPointInElement(pos, selectedElement.value)) {
    // 检查是否有其他元素也在该位置
    const overlappingElements = [];
    for (let i = 0; i < allElements.value.length; i++) {
      const element = allElements.value[i];

      if (isPointInElement(pos, element)) {
        overlappingElements.push({
          element: element,
          index: i,
          area: calculateElementArea(element),
          type: element.type,
        });
      }
    }

    if (window.debugMode) {
      console.log("🔍 重叠元素检测结果:", overlappingElements);
    }

    // 如果只有一个元素，直接返回当前选中的
    if (overlappingElements.length === 1) {
      return selectedElement.value;
    }

    // 如果有多个重叠元素，需要智能选择
    // 优先选择面积较小的（更精确的标注）
    if (overlappingElements.length > 1) {
      overlappingElements.sort((a, b) => a.area - b.area);
      if (window.debugMode) {
        console.log("🔍 按面积排序后的重叠元素:", overlappingElements);
        console.log("🔍 最终选择:", overlappingElements[0]);
      }
      return overlappingElements[0].element;
    }
  }

  const elementsAtPosition = [];

  // 找到所有包含该点的元素
  for (let i = 0; i < allElements.value.length; i++) {
    const element = allElements.value[i];
    if (isPointInElement(pos, element)) {
      // console.log("element--------", element);
      const area = calculateElementArea(element);
      elementsAtPosition.push({
        element: element,
        index: i,
        area: area,
        type: element.type,
      });
    }
  }

  if (elementsAtPosition.length === 0) {
    return null;
  }

  if (elementsAtPosition.length === 1) {
    return elementsAtPosition[0].element;
  }

  // 多个元素重叠时，优先选择面积最小的（最精确的标注）
  // 性能优化：减少日志输出，只在调试时显示
  if (window.debugMode) {
    console.log(`找到 ${elementsAtPosition.length} 个重叠元素，开始智能排序...`);
  }

  // 按面积排序，面积越小优先级越高
  elementsAtPosition.sort((a, b) => {
    const areaDiff = a.area - b.area;

    // 面积差异大于10时，按面积排序（增加阈值，减少频繁切换）
    if (Math.abs(areaDiff) > 10) {
      if (window.debugMode) {
        console.log(`面积差异较大，按面积排序`);
      }
      return areaDiff;
    }

    // 面积相近时，按绘制顺序排序，后绘制的优先
    if (window.debugMode) {
      console.log(`面积相近，按绘制顺序排序`);
    }
    return b.index - a.index;
  });

  const selected = elementsAtPosition[0];
  if (window.debugMode) {
    console.log(
      `最终选择: ${selected.type}, 面积=${selected.area.toFixed(2)}, 索引=${
        selected.index
      }`
    );
  }

  return selected.element;
};

// ==================== 元素选择与状态管理 ====================

/**
 * 选择元素
 * @param {Object} element - 要选择的元素
 */
const selectElement = (element) => {
  // 在绘制模式下，禁止选择元素，防止干扰绘制逻辑
  if (drawingMode.value) {
    console.log("🚫 绘制模式下，禁止选择元素，防止干扰绘制逻辑");
    return;
  }

  // 安全检查：确保传入的元素有效
  if (!element) {
    console.warn("⚠️  传入的元素为 null 或 undefined");
    return;
  }

  // 检查元素的 node 属性是否存在
  if (!element.node) {
    console.warn("⚠️  element.node 为 null，元素可能已被删除");
    return;
  }

  // 检查元素是否仍然在DOM中
  if (!document.contains(element.node)) {
    console.warn("⚠️  元素已不在DOM中");
    return;
  }

  // 在绘制模式下，不要过度清理，保持绘制功能
  if (!drawingMode.value) {
    // 先全局清理所有残留的控制点
    cleanupAllResizeHandles();
  }

  // 清除之前的选择
  if (selectedElement.value && selectedElement.value !== element) {
    selectedElement.value.attr({
      stroke: getDefaultStroke(selectedElement.value),
      strokeWidth: 2,
      "stroke-dasharray": "none",
      fill: getDefaultFill(selectedElement.value),
    });
  }

  // 设置新的选择
  selectedElement.value = element;
  element.attr({
    stroke: "#ff6b6b",
    strokeWidth: 3,
    // "stroke-dasharray": "5,5", // 虚线边框
    fill: "rgba(255, 107, 107, 0.2)", // 淡红色填充
  });

  // 将选中的元素移到最上层
  element.front();

  // 显示缩放控制点
  showResizeHandles(element);

  // 为选中的元素添加拖拽时的控制点同步更新
  // 注意：不要覆盖新绘制矩形的拖拽事件监听器
  if (element.draggable && !element.data("hasDragHandlers")) {
    element.data("hasDragHandlers", true);

    // 添加拖拽事件监听器
    element.on("drag", () => {
      // 实时更新控制点位置，跟随元素移动
      updateResizeHandlesPosition(element);
    });
  }

  // 重要：确保选中的元素有完整的拖拽功能
  if (!element.draggable) {
    element.draggable(true);
    console.log("✅ selectElement: 为选中元素启用拖拽功能:", element.type);
  }

  // 先清理无效元素
  cleanupInvalidElements();

  // 重要：选择元素时，确保所有元素都有拖拽功能
  allElements.value.forEach((el) => {
    // 安全检查：确保元素有效
    if (!el || !el.node || !document.contains(el.node)) {
      console.warn("⚠️ selectElement: 跳过无效元素");
      return;
    }

    // 确保所有矩形都有拖拽功能
    if (el.type === "rect" && !el.draggable) {
      el.draggable(true);
      console.log("✅ selectElement: 为现有矩形启用拖拽功能:", el.type);
    }
    if (!el.draggable) {
      el.draggable();
      console.log("✅ 启用元素拖拽:", el.type);
    }
    // 清除拖拽优先级标记
    el.data("dragPriority", false);
  });
};

/**
 * 清除所有选择
 */
const clearSelection = () => {
  // 清除悬停状态
  if (hoveredElement.value) {
    try {
      hoveredElement.value.attr({
        stroke: getDefaultStroke(hoveredElement.value),
        strokeWidth: 2,
        "stroke-dasharray": "none",
        fill: getDefaultFill(hoveredElement.value),
      });
    } catch (error) {
      console.warn("⚠️ clearSelection: 清除悬停状态时出错:", error);
    }
    hoveredElement.value = null;
  }

  // 清除选中状态
  if (selectedElement.value) {
    try {
      selectedElement.value.attr({
        stroke: getDefaultStroke(selectedElement.value),
        strokeWidth: 2,
        "stroke-dasharray": "none",
        fill: getDefaultFill(selectedElement.value),
      });

      // 移除拖拽事件监听器
      if (selectedElement.value.off) {
        selectedElement.value.off("drag");
      }
    } catch (error) {
      console.warn("⚠️ clearSelection: 清除选中状态时出错:", error);
    }

    selectedElement.value = null;
  }

  // 全局清理所有控制点
  cleanupAllResizeHandles();

  // 恢复所有元素的正常拖拽状态
  restoreNormalDragState();
};

// ==================== 事件处理函数 ====================

/**
 * 检测是否点击在调整大小的控制点上
 * @param {MouseEvent} event - 鼠标事件
 * @returns {boolean} 是否点击在控制点上
 */
const isClickingOnResizeHandle = (event) => {
  const target = event.target;

  // 检查是否点击在调整大小的控制点上
  // 检查SVG.js的resize插件控制点
  if (target.classList && target.classList.contains("svg-resize-handle")) {
    return true;
  }

  // 检查我们自定义的控制点
  if (target.nodeName === "rect" && target.getAttribute("fill") === "#ffffff") {
    return true;
  }

  // 检查是否有resize-handle类
  if (target.classList && target.classList.contains("resize-handle")) {
    return true;
  }

  // 检查父元素是否有resize-handle类
  let parent = target.parentElement;
  while (parent) {
    if (parent.classList && parent.classList.contains("resize-handle")) {
      return true;
    }
    parent = parent.parentElement;
  }

  return false;
};

/**
 * 鼠标移动事件处理
 * @param {MouseEvent} event - 鼠标移动事件
 */
const onMouseMove = (event) => {
  const pos = getMousePosition(event);

  // 跟踪全局鼠标位置，用于快捷键检测
  window.mouseX = event.clientX;
  window.mouseY = event.clientY;

  // 处理绘制模式 - 优先级最高
  if (drawingMode.value) {
    // 绘制模式下，简单设置鼠标样式即可（避免频繁调用强制设置函数）
    if (svgCanvas.value && svgCanvas.value.style.cursor !== "crosshair") {
      svgCanvas.value.style.cursor = "crosshair";
    }
    if (document.body.style.cursor !== "crosshair") {
      document.body.style.cursor = "crosshair";
    }

    if (drawing.value && currentElement.value) {
      updateDrawingShape(pos);
      return; // 正在绘制时不处理悬停预览
    } else {
      // 绘制模式下但还未开始绘制，不处理悬停预览
      // 避免在绘制过程中意外选中其他矩形
      return;
    }
  } else {
    // 非绘制模式下，恢复默认鼠标样式
    restoreNormalCursor();
  }

  // 处理拖拽模式下的实时选中
  if (dragging.value) {
    handleDragSelection(pos);
    return; // 拖拽模式下不处理悬停预览
  }

  // 处理悬停预览（非绘制模式且非拖拽模式）
  if (!drawingMode.value && !drawing.value && !dragging.value) {
    handleHoverPreview(pos);
  }
};

/**
 * 处理拖拽过程中的实时选中
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const handleDragSelection = (pos) => {
  // 在拖拽过程中，保持当前选中元素的选中状态
  // 不因为鼠标经过其他元素而改变选择，确保拖拽的连续性
  if (selectedElement.value) {
    // 只更新当前选中元素的控制点位置
    updateResizeHandlesPosition(selectedElement.value);
  }
};

/**
 * 检查鼠标是否在缩放点附近
 * @param {{x: number, y: number}} pos - 鼠标位置
 * @param {Object} element - 元素对象
 * @returns {boolean} 是否在缩放点附近
 */
const isNearResizeHandles = (pos, element) => {
  if (!element || !element.data("resizeHandlesCount")) return false;

  const handles = window.resizeHandlesManager?.get(element.data("elementId"));
  if (!handles) return false;

  // 检查鼠标是否在任何缩放点的扩展区域内
  const extendedHandleSize = 20; // 扩展的交互区域

  for (const handle of handles) {
    if (handle && handle.attr) {
      const handleX = handle.attr("x") + handle.attr("width") / 2;
      const handleY = handle.attr("y") + handle.attr("height") / 2;

      const distance = Math.sqrt((pos.x - handleX) ** 2 + (pos.y - handleY) ** 2);

      if (distance < extendedHandleSize) {
        return true;
      }
    }
  }

  return false;
};

/**
 * 处理悬停预览
 * @param {{x: number, y: number}} pos - 当前鼠标位置
 */
const handleHoverPreview = (pos) => {
  // 如果在绘制模式，不处理悬停效果
  if (drawingMode.value) {
    console.log("🎨 绘制模式下，不处理悬停预览");
    return;
  }

  // 如果正在绘制，不处理悬停效果
  if (drawing.value) {
    console.log("🎨 正在绘制中，不处理悬停预览");
    return;
  }

  // 如果正在拖拽或调整大小，不处理悬停效果
  // 拖拽过程中保持当前选择状态，不显示悬停效果
  if (dragging.value) return;

  // 性能优化：如果鼠标在缩放点附近，不处理悬停预览
  // 防止在缩放点区域意外切换到其他矩形
  if (selectedElement.value && isNearResizeHandles(pos, selectedElement.value)) {
    return;
  }

  // 性能优化：增加悬停检测的稳定性
  // 检查鼠标位置是否发生显著变化
  const distance = Math.sqrt(
    (pos.x - lastMousePos.value.x) ** 2 + (pos.y - lastMousePos.value.y) ** 2
  );
  if (distance < 8) return; // 进一步增加最小移动距离，减少频繁切换

  lastMousePos.value = pos;

  const element = findElementAtPosition(pos);
  // console.log("elementelement--", element);
  // 简化悬停检测：直接切换，提高响应性
  // 如果悬停的是同一个元素，不重复处理
  if (element) {
    // debugger
    element.front();
  }
  if (hoveredElement.value === element) {
    return;
  }

  // 清除之前的悬停状态
  if (hoveredElement.value && hoveredElement.value !== element) {
    // 如果之前悬停的元素是当前选中的元素，恢复选中状态
    if (hoveredElement.value === selectedElement.value) {
      hoveredElement.value.attr({
        stroke: "#ff6b6b",
        strokeWidth: 3,
        // "stroke-dasharray": "5,5",
        fill: "rgba(255, 107, 107, 0.2)",
      });
    } else {
      // 否则恢复默认状态
      hoveredElement.value.attr({
        stroke: getDefaultStroke(hoveredElement.value),
        strokeWidth: 2,
        "stroke-dasharray": "none",
        fill: getDefaultFill(hoveredElement.value),
      });
    }

    // 重要：移出时不恢复拖拽状态，保持当前状态
    if (window.debugMode) {
      console.log("🔄 移出元素，保持拖拽状态");
    }
  }

  // 设置新的悬停状态 - 实现CVAT风格的"移入即选中"
  if (element && element !== selectedElement.value) {
    // 移入新矩形，立即选中
    if (hoveredElement.value !== element) {
      hoveredElement.value = element;

      // 在绘制模式下，只做悬停预览，不调用selectElement
      if (drawingMode.value) {
        // 绘制模式下，只显示悬停预览，不改变选择状态
        element.attr({
          stroke: "#ffa500", // 橙色悬停边框
          strokeWidth: 2,
          "stroke-dasharray": "none",
          fill: "rgba(255, 165, 0, 0.1)", // 淡橙色悬停填充
        });
      } else {
        // 非绘制模式下，移入就立即选中
        selectElement(element);

        // 重要：确保选中的元素有完整的拖拽功能
        if (element) {
          // 启用拖拽功能
          if (!element.draggable) {
            element.draggable(true);
            console.log("✅ 为移入元素启用拖拽功能:", element.type);
          }

          // 强制重新绑定拖拽事件监听器，确保拖拽功能正常
          console.log("🔧 强制重新绑定拖拽事件监听器:", element.type);

          // 先移除所有可能存在的拖拽监听器
          element.off("dragstart dragmove dragend");

          // 重新绑定完整的拖拽事件监听器
          element.on("dragstart", () => {
            console.log("🎯 移入元素开始拖拽:", element.type);

            // 拖拽开始时，确保这个元素被选中
            if (selectedElement.value !== element) {
              selectElement(element);
            }

            dragging.value = true;

            // 拖拽开始时，暂时禁用悬停检测
            // if (window.hoverDetectionInterval) {
            //   clearInterval(window.hoverDetectionInterval);
            //   window.hoverDetectionInterval = null;
            // }
          });

          element.on("dragmove", () => {
            // 拖拽过程中，更新控制点位置
            if (selectedElement.value === element) {
              updateResizeHandlesPosition(element);
            }
          });

          element.on("dragend", () => {
            console.log("🎯 移入元素拖拽结束:", element.type);
            dragging.value = false;

            // 拖拽结束后，更新控制点位置
            updateResizeHandlesPosition(element);

            updateRectData(element);

            // 拖拽结束后，重新启用悬停检测
            // if (!window.hoverDetectionInterval) {
            //   window.hoverDetectionInterval = setInterval(() => {
            //     if (!dragging.value && !drawingMode.value) {
            //       const currentPos = { x: window.mouseX || 0, y: window.mouseY || 0 };
            //       handleHoverPreview(currentPos);
            //     }
            //   }, 100);
            // }
          });

        //   console.log("✅ 为移入元素重新绑定完整的拖拽事件监听器:", element.type);
        }
      }
    }
  } else if (element && element === selectedElement.value) {
    // 如果悬停的是当前选中的元素，保持选中状态
    if (hoveredElement.value !== element) {
      hoveredElement.value = element;
    }
  } else {
    // 如果没有悬停任何元素，保持当前选中状态（CVAT风格）
    // 不清除选择，只有移入其他矩形时才切换
    if (hoveredElement.value && hoveredElement.value !== selectedElement.value) {
      hoveredElement.value = null;
    }
  }
};

// ==================== 调试工具函数 ====================

/**
 * 调试：显示当前控制点状态
 */
const debugResizeHandles = () => {
  if (selectedElement.value) {
    const handleCount = selectedElement.value.data("resizeHandlesCount");

    // 检查全局管理器中的控制点
    const handles = window.resizeHandlesManager?.get(
      selectedElement.value.data("elementId")
    );
    console.log("全局管理器中的控制点:", handles);

    // 检查DOM中的实际控制点
    const svgElement = selectedElement.value.node;
    if (svgElement && svgElement.parentNode) {
      const parent = svgElement.parentNode;
      const actualHandles = parent.querySelectorAll(".resize-handle");
      console.log("DOM中实际控制点数量:", actualHandles.length);

      // 显示每个控制点的位置和属性
      actualHandles.forEach((handle, index) => {
        const rect = handle.getBoundingClientRect();
        const handleIndex = handle.getAttribute("data-handle-index");
        const elementId = handle.getAttribute("data-element-id");
        console.log(
          `控制点 ${index}: x=${rect.x}, y=${rect.y}, handleIndex=${handleIndex}, elementId=${elementId}`
        );
      });
    }
  }

  // 检查所有元素的控制点状态
  console.log("所有元素的控制点状态:");
  allElements.value.forEach((element, index) => {
    const handleCount = element.data("resizeHandlesCount");
  });

  // 检查循环引用
  console.log("=== 循环引用检查 ===");
  try {
    if (selectedElement.value) {
      const testData = {
        type: selectedElement.value.type,
        bbox: selectedElement.value.data("bbox"),
        handlesCount: selectedElement.value.data("resizeHandlesCount") || 0,
      };
      console.log("测试数据序列化:", JSON.stringify(testData));
      console.log("✅ 无循环引用问题");
    }
  } catch (error) {
    console.error("❌ 检测到循环引用:", error.message);
  }
};

/**
 * 退出绘制模式
 */
const exitDrawingMode = () => {
  // 如果正在拖拽，不退出绘制模式
  if (dragging.value) {
    console.log("⚠️ 正在拖拽中，不退出绘制模式");
    return;
  }

  drawingMode.value = false;
  drawing.value = false;
  if (currentElement.value) {
    // 如果正在绘制，取消当前绘制
    currentElement.value.remove();
    currentElement.value = null;
  }

  // 恢复正常的鼠标样式和画布样式
  if (svgCanvas.value) {
    svgCanvas.value.style.backgroundColor = "white";
  }
  // 恢复默认鼠标样式
  restoreNormalCursor();

  // 停止绘制模式鼠标样式监控
  if (window._cursorMonitorInterval) {
    clearInterval(window._cursorMonitorInterval);
    window._cursorMonitorInterval = null;
    console.log("✅ 绘制模式鼠标样式监控已停止");
  }

  console.log("✅ 已退出绘制模式");
};

/**
 * 添加键盘事件监听器
 */
const addKeyboardListeners = () => {
  console.log("⌨️ 添加键盘事件监听器");

  // 监听键盘按下事件
  document.addEventListener("keydown", (event) => {
    // 如果正在绘制或拖拽，不处理快捷键
    if (drawing.value || dragging.value) {
      console.log("⌨️ 正在绘制或拖拽中，跳过快捷键处理");
      return;
    }

    // 检查是否在SVG画布区域内
    if (!isMouseInSVGCanvas()) {
      console.log("⌨️ 鼠标不在SVG画布区域内，跳过快捷键处理");
      return;
    }

    switch (event.key.toLowerCase()) {
      case "n": // N键绘制矩形
        event.preventDefault();
        console.log("🎨 快捷键N：进入矩形绘制模式");
        selectShape("rect");
        break;

      case "escape": // ESC键退出绘制模式
        event.preventDefault();
        console.log("🚪 快捷键ESC：退出绘制模式");
        exitDrawingMode();
        break;
      case "space": // 空格键测试拖动
        event.preventDefault();
        console.log("🧪 快捷键空格：测试拖动");
        testPanning();
        break;
      case "delete": // Delete键删除选中的矩形
      case "backspace": // Backspace键删除选中的矩形
        event.preventDefault();
        console.log("🗑️ 快捷键Delete/Backspace：删除选中的矩形");
        deleteSelectedRectangle();
        break;
      default:
        console.log("⌨️ 未处理的按键:", event.key);
    }
  });
};

/**
 * 检查鼠标是否在SVG画布区域内
 */
const isMouseInSVGCanvas = () => {
  if (!svgCanvas.value) return false;

  const rect = svgCanvas.value.getBoundingClientRect();
  const mouseX = window.mouseX || 0; // 需要跟踪鼠标位置
  const mouseY = window.mouseY || 0;

  return (
    mouseX >= rect.left &&
    mouseX <= rect.right &&
    mouseY >= rect.top &&
    mouseY <= rect.bottom
  );
};

// 移除旧的快捷键绘制函数，现在使用点击绘制

/**
 * 应用视口变换
 */
const applyViewportTransform = () => {
  if (!svgDoc.value) return;

  const svgElement = svgDoc.value.node;
  svgElement.style.transform = `translate(${viewport.value.translateX}px, ${viewport.value.translateY}px) scale(${viewport.value.scale})`;
  svgElement.style.transformOrigin = "0 0";

  // 添加过渡效果，使缩放更平滑
  svgElement.style.transition = "transform 0.1s ease-out";

  console.log("🔍 应用视口变换:", {
    scale: viewport.value.scale,
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY,
  });
};

/**
 * 处理滚轮缩放
 */
const handleWheel = (event) => {
  event.preventDefault();

  if (!svgCanvas.value) return;

  const rect = svgCanvas.value.getBoundingClientRect();
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;

  // 计算缩放中心点（相对于SVG）
  const centerX = (mouseX - viewport.value.translateX) / viewport.value.scale;
  const centerY = (mouseY - viewport.value.translateY) / viewport.value.scale;

  // 计算缩放因子
  const delta = event.deltaY > 0 ? 0.9 : 1.1;
  const newScale = Math.max(
    viewport.value.minScale,
    Math.min(viewport.value.maxScale, viewport.value.scale * delta)
  );

  // 计算新的偏移量，保持鼠标位置不变
  const scaleRatio = newScale / viewport.value.scale;
  viewport.value.translateX = mouseX - centerX * newScale;
  viewport.value.translateY = mouseY - centerY * newScale;
  viewport.value.scale = newScale;

  // 应用边界限制，防止内容完全移出可视区域
  applyBoundaryConstraints();

  // 应用变换
  applyViewportTransform();

  // 更新控制点位置
  if (selectedElement.value) {
    updateResizeHandlesPosition(selectedElement.value);
  }

  // 重要：缩放后重新激活绘制模式，确保事件监听器正常工作
  if (drawingMode.value) {
    console.log("🔄 缩放后重新激活绘制模式");
    reactivateDrawingMode();
  }

  console.log("🔍 缩放:", {
    scale: newScale,
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY,
  });
};

/**
 * 开始拖动画布
 */
const startPanning = (event) => {
  console.log("🎯 startPanning 被调用");

  if (drawing.value || drawingMode.value) {
    console.log("❌ 绘制模式下不允许拖动");
    return;
  }

  viewport.value.isPanning = true;
  viewport.value.lastPanPoint = { x: event.clientX, y: event.clientY };

  console.log("✅ 拖动状态已设置:", {
    isPanning: viewport.value.isPanning,
    lastPoint: viewport.value.lastPanPoint,
  });

  // 改变鼠标样式
  if (svgCanvas.value) {
    svgCanvas.value.style.cursor = "grabbing";
  }

  // 添加全局事件监听器
  document.addEventListener("mousemove", panCanvas);
  document.addEventListener("mouseup", stopPanning);
};

/**
 * 拖动画布
 */
const panCanvas = (event) => {
  if (!viewport.value.isPanning) {
    console.log("❌ 不在拖动状态");
    return;
  }

  const deltaX = event.clientX - viewport.value.lastPanPoint.x;
  const deltaY = event.clientY - viewport.value.lastPanPoint.y;

  viewport.value.translateX += deltaX;
  viewport.value.translateY += deltaY;
  viewport.value.lastPanPoint = { x: event.clientX, y: event.clientY };

  // 应用边界限制
  applyBoundaryConstraints();

  // 应用变换
  applyViewportTransform();

  // 更新控制点位置
  if (selectedElement.value) {
    updateResizeHandlesPosition(selectedElement.value);
  }

  // 重要：拖动后重新激活绘制模式，确保事件监听器正常工作
  if (drawingMode.value) {
    console.log("🔄 拖动后重新激活绘制模式");
    reactivateDrawingMode();
  }
};

/**
 * 停止拖动画布
 */
const stopPanning = () => {
  console.log("🛑 stopPanning 被调用");

  viewport.value.isPanning = false;

  // 恢复鼠标样式
  if (svgCanvas.value) {
    svgCanvas.value.style.cursor = "default";
  }

  // 移除全局事件监听器
  document.removeEventListener("mousemove", panCanvas);
  document.removeEventListener("mouseup", stopPanning);

  console.log("✅ 拖动已停止，事件监听器已移除");
};

/**
 * 应用边界限制，防止内容完全移出可视区域
 */
const applyBoundaryConstraints = () => {
  if (!svgCanvas.value) return;

  const containerWidth = 800; // 容器宽度
  const containerHeight = 600; // 容器高度
  const svgWidth = 800; // SVG原始宽度
  const svgHeight = 600; // SVG原始高度

  // 计算缩放后的SVG尺寸
  const scaledWidth = svgWidth * viewport.value.scale;
  const scaledHeight = svgHeight * viewport.value.scale;

  // 限制X轴偏移，确保至少有一部分内容可见
  const maxTranslateX = containerWidth * 0.5; // 允许10%的内容移出
  const minTranslateX = -(scaledWidth - containerWidth * 0.9); // 允许10%的内容移出

  viewport.value.translateX = Math.max(
    minTranslateX,
    Math.min(maxTranslateX, viewport.value.translateX)
  );

  // 限制Y轴偏移
  const maxTranslateY = containerHeight * 0.5;
  const minTranslateY = -(scaledHeight - containerHeight * 0.9);

  viewport.value.translateY = Math.max(
    minTranslateY,
    Math.min(maxTranslateY, viewport.value.translateY)
  );

  console.log("🔒 应用边界限制:", {
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY,
    scaledWidth,
    scaledHeight,
  });
};

/**
 * 重置视口
 */
const resetViewport = () => {
  viewport.value.scale = 1;
  viewport.value.translateX = 0;
  viewport.value.translateY = 0;
  viewport.value.isPanning = false;

  applyViewportTransform();

  // 更新控制点位置
  if (selectedElement.value) {
    updateResizeHandlesPosition(selectedElement.value);
  }

  console.log("🔄 视口已重置");
};

/**
 * 测试拖动功能
 */
const testPanning = () => {
  console.log("🧪 测试拖动功能");
  console.log("当前状态:", {
    drawing: drawing.value,
    drawingMode: drawingMode.value,
    isPanning: viewport.value.isPanning,
    scale: viewport.value.scale,
    translateX: viewport.value.translateX,
    translateY: viewport.value.translateY,
  });

  // 模拟拖动
  viewport.value.translateX = 0;
  viewport.value.translateY = 0;
  applyViewportTransform();
  console.log("✅ 测试拖动完成，视口已移动");
};

/**
 * 测试点击绘制功能
 */
const testClickDrawing = () => {
  console.log("🧪 测试点击绘制功能");
  console.log("当前状态:", {
    drawing: drawing.value,
    drawingMode: drawingMode.value,
    currentShape: currentShape.value,
    currentElement: !!currentElement.value,
    startPoint: !!startPoint.value,
    viewport: {
      scale: viewport.value.scale,
      translateX: viewport.value.translateX,
      translateY: viewport.value.translateY,
    },
  });

  // 强制进入矩形绘制模式
  selectShape("rect");

  // 检查事件监听器是否正确添加
  if (window._rectClickHandler) {
    console.log("✅ 矩形点击事件监听器已存在");
  } else {
    console.log("❌ 矩形点击事件监听器不存在");
  }

  if (window._rectMoveHandler) {
    console.log("✅ 矩形移动事件监听器已存在");
  } else {
    console.log("❌ 矩形移动事件监听器不存在");
  }

  // 检查SVG画布的事件监听器
  if (svgCanvas.value) {
    const listeners = svgCanvas.value.eventListeners || [];
    console.log("SVG画布事件监听器:", listeners);
  }
};

/**
 * 检查视口变换后的绘制功能状态
 */
const checkViewportDrawingState = () => {
  // 检查SVG变换状态
  if (svgDoc.value?.node) {
    const transform = svgDoc.value.node.style.transform;
    console.log("SVG变换:", transform);

    // 解析变换矩阵
    if (transform) {
      const matrix = transform.match(/matrix\(([^)]+)\)/);
      if (matrix) {
        console.log("变换矩阵:", matrix[1]);
      }
    }
  }

  // 检查事件监听器绑定状态
  if (svgCanvas.value) {
    const hasClickListener = svgCanvas.value.onclick !== null;
    const hasMouseDownListener = svgCanvas.value.onmousedown !== null;
    const hasMouseUpListener = svgCanvas.value.onmouseup !== null;
    const hasMouseMoveListener = svgCanvas.value.onmousemove !== null;

    console.log("SVG画布事件监听器状态:", {
      hasClickListener,
      hasMouseDownListener,
      hasMouseUpListener,
      hasMouseMoveListener,
    });
  }

  // 检查鼠标位置计算
  if (window.mouseX !== undefined && window.mouseY !== undefined) {
    const testPos = getMousePosition({
      clientX: window.mouseX,
      clientY: window.mouseY,
      type: "test",
    });
    console.log("当前鼠标位置计算测试:", {
      rawMouse: { x: window.mouseX, y: window.mouseY },
      calculatedPos: testPos,
    });
  }

  console.log("🔍 === 检查完成 ===");
};

/**
 * 测试视口坐标系统
 */
const testViewportCoordinates = () => {
  console.log("🧪 === 视口坐标系统测试 ===");

  if (!svgCanvas.value) {
    console.log("❌ SVG画布未初始化");
    return;
  }

  // 获取画布边界
  const rect = svgCanvas.value.getBoundingClientRect();
  console.log("画布边界:", {
    left: rect.left,
    top: rect.top,
    width: rect.width,
    height: rect.height,
  });

  // 测试不同位置的坐标转换
  const testPoints = [
    { x: rect.left + 100, y: rect.top + 100, desc: "画布中心附近" },
    { x: rect.left + 50, y: rect.top + 50, desc: "画布左上角附近" },
    {
      x: rect.left + rect.width - 50,
      y: rect.top + rect.height - 50,
      desc: "画布右下角附近",
    },
  ];

  testPoints.forEach((point, index) => {
    const mockEvent = {
      clientX: point.x,
      clientY: point.y,
      type: "test",
    };

    const svgCoords = getMousePosition(mockEvent);
    console.log(`测试点 ${index + 1} (${point.desc}):`, {
      screenCoords: { x: point.x, y: point.y },
      svgCoords: svgCoords,
      viewport: {
        scale: viewport.value.scale,
        translateX: viewport.value.translateX,
        translateY: viewport.value.translateY,
      },
    });
  });

  // 测试视口变换的逆变换
  console.log("🔍 视口变换逆变换验证:");
  const testSvgPoint = { x: 400, y: 300 }; // SVG坐标系中的点

  // 应用视口变换（模拟SVG元素被变换）
  const screenX = testSvgPoint.x * viewport.value.scale + viewport.value.translateX;
  const screenY = testSvgPoint.y * viewport.value.scale + viewport.value.translateY;

  // 逆变换回SVG坐标（模拟鼠标点击位置转换到SVG坐标）
  const inverseX = (screenX - viewport.value.translateX) / viewport.value.scale;
  const inverseY = (screenY - viewport.value.translateY) / viewport.value.scale;

  console.log("坐标变换测试:", {
    originalSvg: testSvgPoint,
    transformedScreen: { x: screenX, y: screenY },
    inverseSvg: { x: inverseX, y: inverseY },
    isCorrect:
      Math.abs(inverseX - testSvgPoint.x) < 0.01 &&
      Math.abs(inverseY - testSvgPoint.y) < 0.01,
  });

  // 测试实际绘制位置的验证
  console.log("🔍 实际绘制位置验证:");
  if (allElements.value.length > 0) {
    const lastElement = allElements.value[allElements.value.length - 1];
    if (lastElement && lastElement.type === "rect") {
      const elementPos = {
        x: lastElement.x(),
        y: lastElement.y(),
        width: lastElement.width(),
        height: lastElement.height(),
      };
      console.log("最后一个矩形元素位置:", elementPos);

      // 计算这个位置在屏幕上的显示位置
      const screenPos = {
        x: elementPos.x * viewport.value.scale + viewport.value.translateX,
        y: elementPos.y * viewport.value.scale + viewport.value.translateY,
      };
      console.log("在屏幕上的显示位置:", screenPos);
    }
  }

  console.log("🧪 === 视口坐标系统测试完成 ===");
};

/**
 * 测试绘制位置功能
 */
const testDrawingPosition = () => {
  console.log("🧪 === 测试绘制位置功能 ===");

  if (!svgCanvas.value) {
    console.log("❌ SVG画布未初始化");
    return;
  }

  // 获取画布边界
  const rect = svgCanvas.value.getBoundingClientRect();

  // 测试在画布中心绘制一个矩形
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  console.log("测试绘制位置:", {
    screenCenter: { x: centerX, y: centerY },
    rectBounds: {
      left: rect.left,
      top: rect.top,
      width: rect.width,
      height: rect.height,
    },
    viewport: {
      scale: viewport.value.scale,
      translateX: viewport.value.translateX,
      translateY: viewport.value.translateY,
    },
  });

  // 模拟鼠标点击事件
  const mockEvent = {
    clientX: centerX,
    clientY: centerY,
    type: "test",
  };

  // 获取转换后的SVG坐标
  const svgCoords = getMousePosition(mockEvent);
  console.log("转换后的SVG坐标:", svgCoords);

  // 验证坐标转换的正确性
  const expectedScreenX = svgCoords.x * viewport.value.scale + viewport.value.translateX;
  const expectedScreenY = svgCoords.y * viewport.value.scale + viewport.value.translateY;

  const isCorrect =
    Math.abs(expectedScreenX - centerX) < 1 && Math.abs(expectedScreenY - centerY) < 1;

  console.log("🧪 === 测试绘制位置功能完成 ===");
};

/**
 * 鼠标按下事件处理
 */
const onMouseDown = (event) => {
  console.log("按下了11", event.button);

  // 如果在绘制模式，绘制优先级最高
  if (drawingMode.value && event.button === 0) {
    console.log("🎨 绘制模式下，左键绘制优先级最高");

    // 在点击绘制模式下，不调用startDrawing，避免干扰点击绘制
    if (currentShape.value === "rect") {
      console.log("🎨 矩形点击绘制模式，跳过鼠标按下处理");
      return;
    }
    console.log("🚀 开始绘制");
    startDrawing(event);
    console.log("🚀 绘制模式下，左键绘制优先级最高");

    return; // 绘制模式下直接返回，不处理其他逻辑
  }

  // 中键或右键拖动画布
  // if (event.button === 1 || event.button === 2) {
  //   event.preventDefault();
  //   console.log("🚀 开始拖动画布");
  //   startPanning(event);
  //   return;
  // }
  if (event.button === 0) {
    // 左键点击
    // 假设 isRectAtPosition 方法用于判断点击区域是否有矩形
    if (!isRectAtPosition(event)) {
      event.preventDefault();
      console.log("🚀 开始拖动画布");
      startPanning(event);
      return;
    }
  }
};

function isRectAtPosition(event) {
  // debugger
  // Use standard DOM method to get all rect elements
  const rects = svgDoc.value?.node?.getElementsByTagName("rect");

  // Get click position in SVG coordinates
  const clickX = event.clientX - viewport.value.translateX;
  const clickY = event.clientY - viewport.value.translateY;

  // Convert HTMLCollection to array and check each rect
  return Array.from(rects).some((rect) => {
    const rectX = parseFloat(rect.getAttribute("x"));
    const rectY = parseFloat(rect.getAttribute("y"));
    const rectWidth = parseFloat(rect.getAttribute("width"));
    const rectHeight = parseFloat(rect.getAttribute("height"));

    // Check if click position is within rect bounds
    return (
      clickX >= rectX &&
      clickX <= rectX + rectWidth &&
      clickY >= rectY &&
      clickY <= rectY + rectHeight
    );
  });
}

/**
 * 鼠标松开事件处理
 */
const onMouseUp = (event) => {
  console.log("鼠标松开了", event.button);

  // 停止拖动画布
  if (viewport.value.isPanning) {
    console.log("🛑 在onMouseUp中停止拖动");
    stopPanning();
    return;
  }

  // 在点击绘制模式下，不调用stopDrawing，避免干扰点击绘制
  if (drawingMode.value && currentShape.value === "rect") {
    console.log("🎨 矩形点击绘制模式，跳过鼠标松开处理");
    return;
  }

  // 停止绘制
  if (drawing.value) {
    stopDrawing(event);
  }
};
const rectList = computed({
  get() {
    console.log('props.data--',props.data);
    
    return props.data;
  },
  set(val) {
      console.log("val111", val);
    emits('update:data', val)

  },
});
const initRectList = () => {
    console.log('触发initRectList');
    
 
  rectList.value.forEach((item) => {
    const rect = svgDoc.value.rect(item.width, item.height);
    rect
      .attr({
        x: item.x,
        y: item.y,
        id: item.id,
        // fill: getDefaultFill(item.type),
        fill: "rgba(0, 0, 255, 0.1)",
        stroke: "blue",
        "stroke-width": 1,
      })
      .style("cursor", "move"); // 恢复拖拽功能;
    rect.draggable(true);
    rect.type = "rect";
    rect.data("elementId", item.id);
    allElements.value.push(rect);
  });
};

// 用于控制是否触发更新的标志位
let isInitializing = true;

// 监听 rectList 的变化
watch(rectList, (newData) => {
    console.log('watch 触发，newData:', newData, 'svgDoc.value:', svgDoc.value, 'isInitializing:', isInitializing); 
  if (isInitializing) {
      if (newData && newData.length > 0 && svgDoc.value) {
         isInitializing = false;
      initRectList();
    }
  }
}, {
  immediate: true
});

// ==================== 生命周期钩子 ====================
let cleanupInterval = null;
/**
 * 组件挂载后的初始化
 */
onMounted(() => {
  // 验证SVG.js插件加载状态
  validateSVGPlugins();

  try {
    svgDoc.value = SVG(svgCanvas.value);
    console.log("✅ SVG.js 初始化成功:", {
      svgDoc: !!svgDoc.value,
      svgDocType: typeof svgDoc.value,
      svgDocMethods: svgDoc.value ? Object.getOwnPropertyNames(svgDoc.value) : null,
    });
    console.log('onMounted 中，rectList.value:', rectList.value, 'isInitializing:', isInitializing); 
      // 如果此时已有数据且是初始化阶段，执行初始化操作
    if (rectList.value && rectList.value.length > 0 && isInitializing) {
      isInitializing = false;
      initRectList();
    }
  } catch (error) {
    console.error("❌ SVG.js 初始化失败:", error);
  }

  // 初始化视口变换
  applyViewportTransform();

  // 添加键盘事件监听器
  addKeyboardListeners();

  // 添加SVG画布的mousedown事件监听器，实现智能拖拽切换
  addSVGMouseDownListener();

  // 添加调试功能到全局
  window.debugResizeHandles = debugResizeHandles;

  // 添加拖拽选择优化功能到全局
  window.optimizeDragSelection = optimizeDragSelection;

  // 启动定期清理无效元素的定时器
  cleanupInterval = setInterval(() => {
    cleanupInvalidElements();
  }, 5000); // 每5秒清理一次

  // 在组件卸载时清理定时器

  console.log("🚀 onMounted 执行完成");
});
onUnmounted(() => {
  cleanupInterval && clearInterval(cleanupInterval);
});

/**
 * 添加SVG画布的mousedown事件监听器
 * 实现智能拖拽切换：在鼠标按下的那一刻就立即锁定交互状态
 */
const addSVGMouseDownListener = () => {
  if (!svgCanvas.value) return;

  svgCanvas.value.addEventListener("mousedown", (event) => {
    // 如果在绘制模式，不处理 - 绘制优先级最高
    if (drawingMode.value) {
      console.log("🎨 绘制模式下，不处理元素选择 - 绘制优先级最高");
      return;
    }

    // 如果正在绘制，不处理 - 绘制优先级最高
    if (drawing.value) {
      console.log("🎨 正在绘制中，不处理元素选择 - 绘制优先级最高");
      return;
    }

    // 只处理左键点击
    if (event.button !== 0) return;

    // 获取鼠标位置下的元素
    const pos = getMousePosition(event);
    const elementAtMouse = findElementAtPosition(pos);

    if (elementAtMouse) {
      console.log("🎯 mousedown: 检测到鼠标下的元素，立即锁定交互状态");

      // 立即清除之前的选择
      if (selectedElement.value && selectedElement.value !== elementAtMouse) {
        clearSelection();
      }

      // 立即选择鼠标下的元素
      selectElement(elementAtMouse);

      // 先清理无效元素
      cleanupInvalidElements();

      // 重要：mousedown时，确保所有元素都有拖拽功能，但不设置优先级
      // 拖拽优先级只在拖拽开始时设置
      allElements.value.forEach((element) => {
        // 安全检查：确保元素有效
        if (!element || !element.node || !document.contains(element.node)) {
          console.warn("⚠️ addSVGMouseDownListener: 跳过无效元素");
          return;
        }

        // 确保所有元素都有拖拽功能
        if (!element.draggable) {
          element.draggable();
          console.log("✅ 启用元素拖拽:", element.type);
        }
        // 清除拖拽优先级标记
        element.data("dragPriority", false);
      });

      // 设置交互锁定状态，防止其他元素干扰
      dragging.value = true;

      console.log("✅ mousedown: 交互状态已锁定到:", elementAtMouse.type);
    }
  });
};

/**
 * 优化拖拽过程中的选择状态
 * 确保拖拽的元素始终被正确选中
 */
const optimizeDragSelection = () => {
  if (dragging.value && currentElement.value) {
    // 如果正在拖拽且当前元素存在，确保它被选中
    if (selectedElement.value !== currentElement.value) {
      selectElement(currentElement.value);
    }
  }
};
</script>

<style scoped>
.annotation-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.svg-container {
  position: relative;
  width: 800px;
  height: 100vh;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease;
  flex-shrink: 0;
}

.svg-container:hover {
  /* border-color: #007bff; */
}

.svg-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

.controls {
  margin-top: 10px;
}

button {
  margin-right: 10px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* SVG调整大小控制点的鼠标样式 */
:deep(.svg-resize-handle) {
  cursor: pointer;
}

/* 角落控制点 - 对角线调整 */
:deep(.svg-resize-handle.nw) {
  cursor: nw-resize;
}

:deep(.svg-resize-handle.ne) {
  cursor: ne-resize;
}

:deep(.svg-resize-handle.sw) {
  cursor: sw-resize;
}

:deep(.svg-resize-handle.se) {
  cursor: se-resize;
}

/* 边缘控制点 - 单向调整 */
:deep(.svg-resize-handle.n) {
  cursor: n-resize;
}

:deep(.svg-resize-handle.s) {
  cursor: s-resize;
}

:deep(.svg-resize-handle.e) {
  cursor: e-resize;
}

:deep(.svg-resize-handle.w) {
  cursor: w-resize;
}

/* 拖拽时的鼠标样式 */
:deep(.svg-draggable) {
  cursor: move;
}

/* 选中状态下的鼠标样式 */
:deep(.svg-selected) {
  cursor: default;
}

/* 悬停状态下的鼠标样式 */
:deep(.svg-hover) {
  cursor: pointer;
}

/* 自定义缩放控制点样式 */
.resize-handle {
  pointer-events: all;
  z-index: 1000;
}

.resize-handle:hover {
  fill: #ff6b6b !important;
  stroke: #ff6b6b !important;
}

/* 快捷键信息样式 */
.shortcuts-info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  border: 1px solid #e9ecef;
}

.shortcuts-info p {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
}

.shortcuts-info kbd {
  background-color: #e9ecef;
  border: 1px solid #adb5bd;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  font-family: monospace;
}

.reset-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
}

.reset-btn:hover {
  background-color: #0056b3;
}

/* ... existing code ... */

/* 添加样式用于JSON数据显示区域 */
.rect-data-display {
  margin: 20px;
  padding: 15px;
  /* background-color: #f5f5f5; */
  background-color: red;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.rect-data-display pre {
  font-family: monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
